Урок 32. Изображение на WEB-странице

Материалы к уроку

Урок  5  курса Дуванова А.А.

ссылка работает только в школе

Картинка в тексте

Картинку можно помещать в документ почти так же, как текстовый символ. Для вставки этого необычного знака нужно воспользоваться командой IMG.  Команда не имеет парного закрывающего тега, но имеет много атрибутов. 

Атрибут src = имя файла

Самым главным атрибутом команды является атрибут src, при помощи которого можно задать имя файла с картинкой. Например, команда <IMG src=img.gif> заставит браузер отобразить на экране графический файл img.gif из текущего каталога. 

Обычно графические файлы не смешивают с HTML-текстами, а помещают в отдельный каталог pic, который является подкаталогом для каталога с программами (html-файлами). Тогда команда вывода графики будет иметь вид: <IMG src=./pic/img.gif> 

Атрибут alt = "текст надписи"

Если браузер не находит картинки в указанном месте на диске, он вместо нее рисует на экране маленький прямоугольник и вписывает в него надпись, которая задана атрибутом alt:

<IMG src=monstr.jpg alt="Страшный зверь"> 

Атрибут alt рекомендуется использовать всегда. Даже если картинка найдена браузером, задание надписи не будет лишним: стоит пользователю остановить курсор на картинке, как надпись появится в маленьком окошке и сообщит дополнительную информацию. 

Атрибут title = "текст надписи"

Аналогичен alt, но более современен

Атрибуты width = n и height = m

Эти атрибуты задают ширину и высоту (в пикселах) прямоугольника, в который выводится картинка. 

Если атрибуты не заданы, картинка рисуется в естественных размерах. 

Атрибут border = n

Атрибут позволяет задать рамку иллюстрации толщиной в n пикселов. При отсутствии атрибута, или при значении n=0 рамка не рисуется. 

Атрибут align

Этот атрибут позволяет определять положение иллюстрации по отношению к соседним элементам документа. 

Практическая работа 

Урок 31. Списки в таблице на WEB-странице

Повторение. Вложенные списки

На прошлом уроке нужно было построить вложенный список вида:

1. Введение
2. Что такое информатика ?
3. Что такое информация ?
4. Что такое вычислительная машина ?
• Общие положения
• Подробнее о памяти
• Ввод-вывод
• Оперативная память, внешняя память
• Порядок некоторых величин
5. Что может делать вычислительная машина?
6. Что такое программирование?
7. Несколько ключевых слов.

Внешний список - нумерованный. Вложенный - маркированный. 

Нумерация внешнего списка правильно продолжается после вложенного.

Для такой организации списков достаточно после нужного элемента внешнего списка вставить теги для организации вложенного списка:

<ol type=1>
	<li>Введение</li>
	<li>Что такое информатика ?</li>
	<li>Что такое информация ?</li>
	<li>Что такое вычислительная машина ?</li>
	<ul>
	<li>Общие положения</li>
	<li>Подробнее о памяти</li>
	<li>Ввод-вывод</li>
	<li>Оперативная память, внешняя память</li>
	<li>Порядок некоторых величин</li>
	</ul>
	<li> Что может делать вычислительная машина?</li>
	<li>Что такое программирование?</li>
	<li>Несколько ключевых слов.</li>
</ol>

Повторение. Оформление таблицы

Для создания таблицы применяются теги
<TABLE border=1> 
<CAPTION> Заголовок таблицы </CAPTION> <TR>            <!-- строка -->   
<TD>1,1</TD>     <!-- ячейка -->     
</TR>  <!-- конец строки --> 
</TABLE> <!-- конец таблицы --> 

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

Урок 30. Таблицы на WEB-странице

Материалы к уроку в документе.

Таблица - форма представления информации в виде, удобном для анализа. Таблица состоит из строк, которые разделены на ячейки. Внешний контур таблицы и ее частей — прямоугольный.

В практическом HTML-программировании таблицы совершенно незаменимы для… создания левых и правых полей окна браузера, выравнивания элементов в окне, много колонной верстки, наложения картинок друг на друга. И, наконец, для отображения на экране табличного материала.

Пример создания таблицы:

Браузер отображает строки и ячейки в строке так, как описано – слева направо:

<TABLE border=1> 
<TR>            <!-- Первая строка -->   
<TD>1,1</TD>     <!-- Первая ячейка -->   
<TD>1,2</TD>     <!-- Вторая ячейка --> 
</TR> 
<TR>            <!-- Вторая строка -->   
<TD>2,1</TD>     <!-- Первая ячейка -->   
<TD>(2,2)</TD>     <!-- Вторая ячейка -->  </TR> 
<TR>            <!-- Третья строка -->   
<TD>3,1</TD>     <!-- Первая ячейка -->   
<TD>3,2</TD>     <!-- Вторая ячейка --> 
</TR>
</TABLE>

Получится такая таблица:

1,1	1,2
2,1	2,2
3,1	3,2

Атрибуты таблицы в целом и ее отдельных элементов задают следующие свойства:

• выравнивание (по горизонтали и по вертикали, где возможно)
• абсолютную ширину таблицы (в пикселях) или относительно окна браузера (в процентах);
• абсолютную ширину столбца (в пикселях) или относительно строки таблицы (в процентах);
• цвет или картинку фона
• цвет и толщину рамки
• объединение ячеек по горизонтали или по вертикали.

Более подробно о тегах и их параметрах читайте в документе.

Практическая работа

Урок 28. Разметка текста для WEB- страниц.

Далее будем рассматривать теги, которые управляют расположением объектов в окне браузера. Эти теги располагаются в теле документа, т.е. внутри тега <body> ... </body>.

Тезисы находятся в документе.

Рассмотрим структуру HTML-документа:

<HTML> начало парного тега документа

<HEAD> начало парного тега заголовка 

  <META http-equiv="Content-Type"

  content="text/html; charset=windows-1251">

  <TITLE>Упражнение 1</TITLE>

</HEAD> конец парного тега

<BODY> начало парного тега тела. Внутри этого парного тега располагаются описания объектов, которые видны в окне браузера.

   <H1>Первый HTML-документ</H1>

   <HR> горизонтальная черта

   <P>

     Корова не похожа на лошадь. 

   </P>

</BODY> конец парного тега

</HTML> конец парного тега

Рассмотрим следующие темы:

1. Теги отображения абзацев, строк, разделительных линий
2. Атрибуты тегов
3. Форматирование текста
4. Кодирование специальных символов

Практическое задание

Урок 27. Разработка документов для WWW

Комментарии к вопросам контрольной работе по GIMP. 

Начинаем новую тему. Что такое WWW?

Материал по теме урока

World Wide Web (Всемирная Паутина) -- это сеть информационных ресурсов.
В Сети (Web) приняты три механизма для предоставления этих ресурсов для наиболее широкой аудитории:

• Единая система наименований по которым ресурсы могут быть найдены на Сети (URL).
• Протоколы для доступа к именованым ресурсам посредством Сети (HTTP и другие).
• Гипертекст для облегчения навигации среди ресурсов (HTML и другие языки).

 URL

Каждый ресурс доступный по Сети -- документ, изображение, видео клип, программа, и т.п. -- обладает адресом который может быть закодирован при помощи Единого Указателя Ресурса (Uniform Resource Locator), или "URL".

Гипертекст

Ресурсы сети представлены  в виде WEB-страниц, содержащих разнообразную информацию и ссылки на другие WEB-страницы. Такие страницы со ссылками называют  гипертекстом.

Гиперссылка – это элемент Web-страницы, содержащий информацию об адресе другой Web-страницы. В качестве такого объекта обычно выступает фрагмент текста, выделенный цветом и подчеркиванием, или графическая иллюстрация, выделенная цветной рамкой.

HTML

HTML - язык создания (или, как говорят, разметки), гипертекстовых документов. На том языке составлены все страницы сайтов и блогов сети Интернет.

Основы языка HTML

Понятие тега

Тег — это команда для Исполнителя.

Исполнителем является программа—браузер. Прочитывая тег, браузер выполняет определенные действия для отображения объектов документа.

Каждый тег — название, заключенное в < >.После названия тега могут следовать параметры.

Теги парные и непарные

Теги бывают парные и непарные с точки зрения записи и по содержанию.

• Непарный тег: <название список параметров> - содержит всю информацию внутри, его действие заканчивается после >.
• Парные тег: <название список параметров> содержание</название> - показывает, над каким содержанием надо выполнить действие. Заканчивается действие после признака окончания : </название> .

Правила использования парного тега аналогичны правилам использования скобок — всякую открывающую скобку надо закрыть.

Правила оформления документа HTML 

Структура HTML – документа.

• Документ HTML имеет начало и конец
• Документ HTML состоит из заголовка и тела.

В Заголовке содержатся данные о документе – заголовок, таблица кодировки…В Теле – разметка самого документа.

Редакторы гипертекста

Для создания гипертекстовых документов разработаны специальные редакторы, которые подготавливают правильные шаблоны, следят за закрытием парных тегов, позволяют визуально редактировать гипертекстовый документ.

• Редактор HTML для ОС Linux - Geany и Quanta Plus 
• Редактор HTML для ОС Windows -  Nvu

Практическая работа

Урок 26. GIMP. Итоговая работа

Итоговую работу выполним в форме рекламного плаката. Например:

В плакате объединим несколько изображений и красивый текст.
Завершенный плакат экспортируем в формат jpg.
В конце работы постарайтесь все созданные вами изображения в формате jpg опубликовать на своей странице сайта Инф-10-2014-драйв. 
Практическая работа

Урок 25. Рисование и закрашивание

По теории об инструментах рисования и их параметрах смотрим сообщение блога Графический редактор GIMP 

Инструменты рисования GIMP

Инструменты рисования: Кисть, Карандаш, Аэрограф, Ластик, Заливка, Градиент, Пипетка, Палец...

Цвет

При выборе цвета различают цвет переднего плана и цвет заднего плана.Цвет переднего плана (основной) — используется для рисования, заливки выделенных областей. Цвет переднего плана используется в качестве начального цвета градиента.Цвет заднего плана (фоновый) — появляется при стирании ластиком (удалении пикселей). Фоновый цвет используется при завершении градиента.

По умолчанию основной цвет — черный, а фоновый — белый. Основной и фоновый цвета можно менять местами.

GIMP не имеет очевидных инструментов для рисования примитивов, но есть способы создания правильных геометрических фигур:

• использование возможностей стандартных инструментов рисования;
• использование обводки по выделению

Карандаш и клавиша Shift

Карандаш при нажатой клавише Shift рисует прямую линию следующим образом: установить курсор в 1-ю точку прямой и щелкнуть левой клавишей мыши. Затем, не отпуская клавишу Shift, щелкнуть левой клавишей мыши по 2-ой точке прямой, отпустить клавишу Shift.

Направляющие

Направляющие служат для разметки окна изображения для точного рисования. Направляющие можно вытянуть из верхней и боковой линеек, если выбран инструмент Перемещение (смотри Панель инструментов).

Направляющими можно управлять с помощью инструментов Направляющие в окне изображение: Меню — Изображение — Направляющие.

Выделение и клавиши Shift и Ctrl

При нажатой клавише Shift прямоугольное выделение превращается в квадрат, а эллиптическое — в круг: начинаем выделение, потом нажимаем Shift, заканчиваем выделение, отпускаем клавишу Shift. 

При нажатой клавише Ctrl выделенная область центрируется относительно начала выделения: начинаем выделение, потом нажимаем Ctrl, заканчиваем выделение, отпускаем клавишу Ctrl.

При нажатой клавише Shift происходит объединение выделенных областей: делаем первое выделение, потом при нажатой Shift, делаем следующие выделения. Клавишу Shift отпускаем после щелчка вне выделенных областей.

Если выделена какая-то область и создаются новые области при нажатой клавише Ctrl, то они вычитаются из первоначальной. Клавишу Ctrl отпускаем после щелчка вне выделенных областей.Обводка по выделению

Область, созданная инструментом выделения обрисовывается линией заданного цвета и стиля: Меню — Правка — Обвести выделенное.

Скругление прямоугольника

Инструмент Прямоугольное выделение имеет параметр Закругленные углы. Значение этого параметра — размер угла дуги. Дугу можно сделать вогнутой: Меню  — Выделение — Закруглить прямоугольник. Откроется диалоговое окно, в котором отметить флажком параметр Вогнутое. Нажать кнопку Ок. Получился прямоугольник с вогнутыми углами.

Практическая работа
Домашнее задание

1. Повторить теорию по сообщению блога и по документу собщение блога Графический редактор GIMP
2. Завершить отчет по практической работе 

Урок 24. Специальные шрифты. Фильтры

По теории смотрим Тезисы урока

Шрифты для заголовков

Термин «Антиквенный шрифт» в полиграфии обозначает семейство шрифтов, которые обладают общими графическими признаками: наличием серифов (засечек) в окончании штрихов и контрастом в толщинах вертикальных и горизонтальных линий, образующих графику знаков.

Рукописные формы антиквенного шрифта

В конце 14 столетия в Европе зародился новый стиль письма. Прогрессивно настроенные люди раннего Возрождения, гуманисты, изучали и пропагандировали наследие Древнего Рима и Греции. В своей корреспонденции они использовали не готический стиль письма, а копировали более ранние формы начертания букв, которыми были написаны древние рукописи. Отсюда и название шрифта – «антиква», то есть, древний.

Акцидентный набор - Изготовление наборных печатных форм для печатания бланков, аттестатов, грамот, пригласительных билетов, свидетельств, меню, различных объявлений.

Гротески, Гротесковые шрифты, Рубленые шрифты (Sans Serif, Gothic)

Собирательное название шрифтов без засечек. В Англии и Франции они чаще называются Sans Serif, в Америке Gothic, в Германии Grotesk. Первый известный гротеск появился в Англии в 1816 г. в образцах шрифтов лондонского словолитчика Уильяма Кэзлона IV (William Caslon IV, 1780–1869).

Фильтры

По теории смотрим презентацию «Компьютерная графика и анимация». Часть I (слайды 46 - 48)

Фильтры в GIMP – специальные процедуры обработки изображений, которые проводят с активным фрагментом (слоем, выделением) различные математические преобразования. В результате получается измененное изображение.

Доступ к фильтрам: Меню — Фильтры. 

Процедуры фильтров разделены на группы, каждая из которых включает несколько процедур.

Практическая работа

Домашняя работа

1. Готовиться к контрольной работе (19.03.2014). Вопросы для контрольной.

Урок 23. GIMP. Работа с текстом

Создание и редактирование текста

Смотрим презентацию К.Ю.Полякова 

К главе 8: «Компьютерная графика и анимация». Часть II (слайд 7)

Тезисы по теории

В графическом редакторе можно вводить текстовую надпись с помощью инструмента
Текст (А).
Текст появляется в виде отдельного слоя в диалоговом окне Слои. Этот слой помечен буквой Т.

К этому слою нельзя применить инструменты растрового рисования, т.к. шрифты являются одним из видов векторной графики. Зато текст на этом слое можно редактировать, а также применяются разные режимы освещенности, яркости, контрастности..., прозрачность.

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

Диалоговая панель инструмента Текст позволяет устанавливать параметры текста: гарнитура, начертание, кегль, цвет. 

В GIMP можно использовать как имеющиеся в системе гарнитуры, так и семейства гарнитур Serif (для шрифтов с засечкам) и Sans (для шрифтов без засечек). Режим Антиалиасинг отвечает за сглаживание границ символов и его лучше включать. Чтобы закончить работу с текущим текстом, надо поставить птичку рядом с  «Использовать выбранный шрифт» и Закрыть окно.

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

Для преобразования текста в  графический вид используются инструменты графического преобразования — поворот, перемещение, градиент, фильтры... При этом текст теряет свойства текста и становится графическим объектом.

Если вы проводите операции на текстовом слое, и затем позже пытаетесь редактировать текст, возникнет всплывающее сообщение, предупреждающее о том, что изменения будут отменены, и вам будет предложено три варианта:

• создать новый текстовый слой с текстом существующего слоя, оставив существующий слой неизмененным.
• отмена;
• всё равно редактировать текст;

После того, как вы завершите редактировать текст, инструмент перерисует слой, удалив результат предыдущего действия.

Практическая работа

Урок 22. Создание коллажа. Иллюстрации для веб-сайтов

Создание коллажа

GIMP предоставляет инструмент для сохранения выделенной области как канал. Для одного изображения можно сохранить несколько выделенных областей.
Благодаря этому появляется возможность сохраненные в каналах фрагменты для создания и редактирования нового изображения.
Таким образом можно создать, например, коллаж из разных фрагментов.

Иллюстрации для веб-сайтов

Смотрим презентацию К.Ю.Полякова «Компьютерная графика и анимация». Часть II

Иллюстрации для веб-сайтов должны быть сохранены только в тех форматах, которые умеют отображать браузеры (слайд 16).
Эти форматы предназначены для однослойных изображений. Поэтому все слои приходится сводить в один слой.
В перечисленных форматах используется сжатие данных. Если увеличивать степень сжатия, то качество изображения ухудшается, и наоборот (слайды 17 -22).
Форматы GIF и PNG плохо подхолят для хранения изображения с плавными переходами цветов (градиентами). 

В Конструкторе сайтов Google для установки иллюстраций на веб-страницу в режиме редактирования используем кнопку "Вставить изображение".
Практическая работа 

Практическая работа 2

Урок 21. Каналы. Сохранение выделенной области

По теории смотрим  презентацию  «Компьютерная графика и анимация». Часть II слайды со 2  по 14.

Многослойные изображения

Зачем нужны слои? Слои помогают человеку избежать необратимых изменений в сложном изображении. Каждый содержательный с точки зрения человека объект рисуется на отдельном слое (слайд 3).

Каждый слой можно изменять и перемещать независимо от других. Однако, если смотреть на топку слоев сверху, то увидим полный рисунок.

Для управления слоями предназначено диалоговое окно Слои.

Структура диалогового окна Слои (слайд 4).

Список Режим  определяет, как текущий слой влияет на изображение, полученное с нижних слоев (слайд 5).

Операции со слоями (слайд 6).

Текстовый слой создается при использовании инструмента Текст (слайд 7).  этот слой  существует в векторном формате, но может быть преобразован в растровое изображение.

Маска слоя позволяет сделать часть изображения на слое невидимой или полупрозрачной, ничего не удаляя (слайд 8-9). 

Каналы

Канал - инструмент, с помощью которого показывается совокупность точек изображения с одинаковым эффектом. Каждый канал имеет тот же размер, что и все изображение. Смысл этого понятия зависит от типа канала.

Например, в цветовой модели RGB значение канала R означает количество красного цвета, добавляемого к другим цветам пикселей. Здесь канал — совокупность точек указанного цвета в изображении.
Цветовые каналы применяются ко всему изображению, а не к отдельному слою. Есть основные каналы — красный, зеленый и голубой. Можно создавать свои каналы. (слайды 11-13)
Маска выделения. При выделении вы видите "муравьиную дорожку", которая вычерчивает его контур, который разделяет  выделение и маску (закрытую область). Маска — это канал в градациях серого, покрывающий изображение.
Для управление каналами используется  окно Диалог каналов (слайд 11).

Выделенную область можно сохранить с помощью Диалога каналов  (слайд 14).

Каналы используются в двух целях, поэтому диалог каналов разделён на две части: первая часть для цветовых каналов и вторая для масок выделения.

Практическая работа

Урок 20. Работа со слоями

Слои

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

Слои позволяют создать анимацию, показать разнообразные эффекты с фрагментами изображения и с текстом.

Лучше всего познакомиться  с понятием слои на практике.

Практическая работа

Урок 19. Цветовые модели. Коррекция фотографий

Цветовые модели

Теория в документе. 

По теории смотрим в презентации «Компьютерная графика и анимация». Часть I слайды с 11 по 16 .

Коррекция фотографий

По практике смотрим в презентации «Компьютерная графика и анимация». Часть I слайды с 25 по 37 

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

Исправление перспективы

Выделить все изображение. Затем применить инструмент 

Меню - Выделение - Все - Перспектива

После этого углы рисунка, выделенные квадратами, перетащить так, чтобы выровнять вертикальные линии. 

Коррекция уровней

Гистограмма - график, который показывает распределение пикселей по яркости. Чтобы увидеть гистограмму для открытого изображения, выберите инструмент

Меню - Окно - Прикрепляющиеся диалоги - Гистограмма

Высота вертикальных отрезков определяет количество пикселей, имеющих одинаковую яркость, от самых темных (слева) до самых светлых (справа).

Если фото слишком темное, то все пиксели сосредоточены слева.Если фото слишком светлое, то все пиксели сосредоточены справаВ малоконтрастном фото есть средние тона, но нет темных.Четкое контрастное фото содержит пиксели всех уровней яркости.

Откроем  последовательно фотографии morning.jpg, evening.jpg, sun.jpg и lake.jpg.

Сравним гистограммы для них. 

Чтобы улучшить контрастность, нужно "растянуть" гистограмму так, чтобы она занимала весь диапазон тонов от черного до белого.

Для этого используется инструмент

Меню - Цвет Уровни

 В появившемся окне нужно отрегулировать положение черного, серого и белого движков под гистограммой.

Для выравнивания уровней можно также использовать инструмент

Меню - Цвет - Яркость - Контраст

Коррекция цвета

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

Для коррекции цвета используется инструмент

 Меню - Цвет - Цветовой баланс

Ретушь

Ретушью называют устранение дефектов фотографий.

Практическая работа и домашнее задание

Урок 17. Работа с выделенным областями

Смотреть слайды 38 - 42 презентации «Компьютерная графика и анимация». Часть I

Инструменты выделения

Часто нужно работать с некоторой областью изображения, а пиксели вне этой области не должны меняться. Для выделения областей в редакторе GIMP предназначены несколько инструментов (слайды 39 - 40). 

Если в момент выделения области была нажата клавиши Shift, новая область добавляется к уже выделенной.Если в момент выделения области была нажата клавиши CTRL, новая область вычитается из  уже выделенной.

Таким образом можно можно строить сложные выделенные области.

Сглаживание и растушевка

Любой пиксель может быть выделен частчно, например на 25. Это значит, что для такого пикселя эффект, примененный к области, будет ослаблен в 4 раза (слайд 41). 
Частичное выделение получается при использовании двух параметров  - сглаживания и растушевки. 
Эти параметры задаются в окне параметров выбранного инструмента выделения (слайд 42).

Практическое задание и Домашнее задание