Контент-менеджмент - Кафедра социологии и управления МАДИ

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ
ФЕДЕРАЛЬНОЕ АГЕНТСВО ПО ОБРАЗОВАНИЮ
ИНСТИТУТ ПРОБЛЕМ РАЗВИТИЯ ВПО
МОСКОВСКИЙ АВТОМОБИЛЬНО-ДОРОЖНЫЙ ИНСТИТУТ
(ГОСУДАРСТВЕННЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ)
КАФЕДРА СОЦИОЛОГИИ И УПРАВЛЕНИЯ
В. Л. СИЛАЕВА
КОНТЕНТ-МЕНЕДЖМЕНТ
Учебное пособие
для студентов специальности 080505
«Управление персоналом»
МОСКВА
2006
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ
ФЕДЕРАЛЬНОЕ АГЕНТСВО ПО ОБРАЗОВАНИЮ
ИНСТИТУТ ПРОБЛЕМ РАЗВИТИЯ ВПО
МОСКОВСКИЙ АВТОМОБИЛЬНО-ДОРОЖНЫЙ ИНСТИТУТ
(ГОСУДАРСТВЕННЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ)
КАФЕДРА СОЦИОЛОГИИ И УПРАВЛЕНИЯ
В. Л. СИЛАЕВА
КОНТЕНТ-МЕНЕДЖМЕНТ
Учебное пособие
для студентов специальности 080505
«Управление персоналом»
МОСКВА
2006
4
УДК
ББК
Силаева В. Л. Контент-менеджмент: Учеб. пособие / Под ред. И. В. Федорова. —
М.: МАДИ (ГТУ), 2006 — 88 с.
Рецензенты:
академик РАЕН, д.ф.н., профессор кафедры социологии и культурологии
МГТУ им. Н. Э. Баумана Н. Г. Багдасарьян,
к. т. н., доцент кафедры математического моделирования МГТУ им.
Н. Э. Баумана А. Е. Голубев.
Настоящее пособие содержит основы языка HTML и программы
Adobe Photoshop, оригинально соединенных в объеме, достаточном для
практики наполнения контента сайтов, что составляет технологический
базис знаний и умений, необходимых для работы контент-менеджера.
Два раздела пособия разбиты на тематические блоки, содержащие
оптимальный набор теоретической информации, а также примеры и
упражнения, которые необходимо выполнить для освоения темы.
Представленные материалы предназначены для освоения курса
«Контент-менеджмент» студентами специальности «Управление персоналом»
МАДИ (ГТУ), а также для всех интересующихся данным курсом.
ISBN
© Министерство образования и науки РФ, 2006
© Федеральное агентство по образованию, 2006
© Московский автомобильно-дорожный институт (государственный
технический университет), 2006
© Институт проблем развития ВПО, 2006
© Кафедра социологии и управления, 2006
© Силаева В. Л., 2006
5
О профессии контент-менеджера
Недавно на рынке труда появилась новая востребованная профессия
контент-менеджера. Зарплата такого специалиста в зависимости от
квалификации, функциональных обязанностей, характера и места работы
может быть достаточно высокой.
В чем причина появления этой профессии, и какими знаниями
должен обладать соискатель, претендующий на нее?
В связи с проникновением Интернета во все сферы общественной
жизни возникла необходимость грамотной презентации общественных
структур и процессов в них. Для осуществления такой презентации в
Интернете резервируется место, на котором строится сайт — некоторый
аналог
полиграфического
издания.
Информационная
тематика,
представленная на сайте, зависит от целей его создания. Основная цель —
рекламная. Государственные организации и коммерческие предприятия, а
также физические лица создают сайты для рекламы и освещения характера
своей деятельности. За последние годы сайт из разряда модных рекламных
дополнений перерос в обязательную часть рекламы, а адрес сайта в
Интернете стал такой же контактной информацией, как номер телефона.
Очевидно, что содержание сайта и форма подачи информации на нем —
важнейшие параметры, от которых во многом зависит успех организаций и
предприятий. Очевидно также, что формировать эти параметры должен
человек
со
специальными
умениями,
знающий,
какую
именно
информацию поместить на сайт и как это сделать. Таким специалистом
является
контент-менеджер
(название
происходит
от
английского
«content» — содержание, в данном случае — содержание сайта).
Грамотного специалиста в этой области найти сложно, потому что
потребность в таких специалистах возникла сравнительно недавно и их
3
подготовкой никто, за исключением единичных учебных центров, не
занимается.
Спектр обязанностей, которые должен выполнять контент-менеджер,
довольно широк. В общем виде его можно представить следующими
позициями:
 тактическое управление интернет-проектами и их продвижение;
 создание, редактирование и обновление контента (текстового и
графического).
Требования, которые обычно предъявляются к кандидату на эту
должность, подразумевают знания и опыт работы в различных областях
гуманитарного и технического характера, а именно:
 отличное знание интернет-технологий и интернет-сервисов;
 опыт работы с большими объемами информации;
 грамотность в области русского языка — часто в связке с
английским;
 владение графическими пакетами (чаще всего требуется знание
программы «Photoshop»);
 знание основ языка HTML;
 и прочее — в зависимости от уровня и тематики сайта, на
котором будет работать соискатель.
По
структуре
сайтов
работу
контент-менеджеров
можно
типологизировать следующим образом: работа на сайтах со статическим
контентом и на сайтах с динамическим контентом.
Сайты со статическим контентом заключают в себе информацию,
которая обновляется редко. Это — сайты, рекламирующие организации,
параметры и характер деятельности которых перманентны. Обновление
информации на таких сайтах происходит через редактирование HTMLкода. Поэтому контент-менеджер, работающий на таком сайте, обязан
4
понимать структуру языка HTML наcтолько, чтобы суметь отредактировать
уже имеющийся HTML-документ.
Сайты с динамическим контентом заключают в себе периодически
дополняемую и обновляемую информацию. Например, сайты СМИ,
предприятий с меняющимся ассортиментом выпускаемой продукции и
прочее. Работа с такой информацией посредством редактирования HTMLкода довольно трудоемка. Поэтому сайты с динамическим контентом
создаются как базы данных. А внесение информации в них происходит
через окно браузера. Но для последующего адекватного отображения
внесенной
информации
на
сайте
контент-менеджеру
необходимо
использовать элементы языка HTML.
Таким образом, язык HTML важен для работы контент-менеджера,
поэтому он представлен в данном пособии в том объеме, который
требуется для работы.
Часто
сайты
сопровождаются
графическими
изображениями,
основную часть которых представляют фотографии (это могут быть
фотографии
выпускаемой
продукции,
сотрудников
организации,
представленной на сайте и т. д.). К таким изображениям предъявляются
специальные требования при обработке. Оптимально удобной для
обработки графических изображений (особенно для фотографий) является
программа
Adobe
Photoshop.
Для
работы
контент-менеджера
нет
необходимости осваивать программу на высоком профессиональном
уровне, но знать основные функции программы и уметь их использовать
нужно. Поэтому в данном пособии представлены основы работы в
программе Adobe Photoshop как необходимое дополнение к деятельности
контент-менджера в области обработки изображений, составляющих
контент сайта.
5
1. Язык HTML
HTML — Hyper Text Markup Language — язык разметки гипертекста.
Он предназначен для создания гипертекстовых документов в среде WEB.
Основное преимущество HTML заключается в том, что документ,
созданный на этом языке, может быть просмотрен через WEB-браузеры
различных типов и на различных платформах.
Разметка документа на языке HTML осуществляется посредством
тэгов. Тэги – это команды, которые окружают текстовый или графический
раздел документа, и определяют, какие параметры имеет данный текст или
графика. Тэги задают расположение и вид объектов на странице.
Все тэги HTML начинаются с символа «<» (левой угловой скобки) и
заканчиваются символом «>» (правой угловой скобкой). Практически все
тэги в языке HTML парные: пара включает открывающий и закрывающий
тэги, между которыми находится форматируемый объект (текст или
графика). Закрывающий тэг выглядит также, как открывающий, и
отличается от него прямым слэшем перед текстом внутри угловых скобок.
Например, пара <u> </u> делает
текст подчеркнутым: <u> —
открывающий тэг, текст, расположенный после этого тэга, будет
подчеркнутым; </u> — закрывающий тэг, он определяет, в каком месте
прекратится подчеркивание текста. Работа с тэгами требует предельной
аккуратности:
незакрытый тэг может исказить форматирование всего
текста. Тэги можно располагать подряд в одну строку без пробела или с
пробелом, можно располагать отдельно на каждой строчке; их можно
набирать заглавными или прописными буквами. Это не меняет смысл
HTML-кода, но для удобства последующей редакции лучше сразу
определиться в порядке и стиле их расположения. Дополнительные
пробелы, символы табуляции и возврата каретки, добавленные в исходный
6
текст
HTML-документа
для
его
лучшей
читаемости,
будут
проигнорированы WEB-браузером при интерпретации документа.
HTML-документы могут быть созданы при помощи любого
текстового редактора или специализированных HTML-редакторов и
конвертеров (например, MS FrontPage, Macromedia Dreamweaver и
прочих). Выбор редактора, который будет использоваться для создания
HTML-документов, зависит исключительно от понятия удобства и личных
пристрастий
каждого
автора.
Однако
важно
помнить,
что
специализированные HTML-редакторы и конвертеры добавляют лишние
тэги в HTML-документ, что приводит к утяжелению веса файла,
следовательно увеличивает время его загрузки пользователем. Кроме того,
созданный программой HTML-код сложен для редактирования. Поэтому
лучше писать тэги «вручную» с помощью текстового редактора.
Для создания HTML-документа можно использовать стандартную
программу «Блокнот» (в Windows:
Пуск/ Программы/ Стандартные/
Блокнот). В файле «Блокнота» размещается HTML-код документа.
Созданный файл сохраняется с расширением .html или .htm — в таком
виде его можно смотреть через браузер. Следует отметить, что при
просмотре в разных браузерах документ может отличаться по виду,
поэтому
прежде,
чем
вывешивать
HTML-документ
в
Интернет,
необходимо убедиться в том, что он адекватно отображается во всех
браузерах, а не только в Internet Explorer. При создании HTML-документа
надо
учитывать
потребности
пользователей,
которые
будут
его
впоследствии смотреть; читабельность и привлекательность HTMLдокумента зависят от правильной компоновки информации в нем,
гармоничных цветосочетаний фона, текста и изображений, выбора размера
и стиля текста.
7
1.1. Структура HTML-документа
Первичная структура документа выглядит следующим образом:
<HTML>
<HEAD>
<TITLE> название документа</TITLE>
</HEAD>
<BODY> сам документ</BODY>
</HTML>
Тэги <HTML> и </HTML> задают формат документа: если их не
поставить, не будет распознаваться формат HTML. Открывающий тэг
<HTML> задает начало HTML-документа, закрывающий тэг </HTML> —
конец документа.
Тэги <HEAD> и </HEAD> определяют заголовок документа. В
заголовке указывается различная служебная информация. Одним из ее
параметров
является
название
документа.
Название
документа
высвечивается в титульной строке браузера (на самом верху экрана при
просмотре через браузер). Тэги этого параметра <TITLE> и </TITLE>.
Например, чтобы на титульной строке браузера было написано:
«Персональная страница Иванова Ивана Ивановича», в коде HTML
необходимо написать следующее:
<HEAD>
<TITLE>Персональная страница Иванова Ивана Ивановича</TITLE>
</HEAD>
Тэги
<BODY>
и
</BODY>
определяют
тело
(содержание)
документа. Между этими тэгами будет помещен текст и графика,
отформатированные тэгами.
Таким образом, структура HTML-документа подразделяется на две части:
8
1) заголовок;
2) содержание документа.
Упражнение. Откройте программу «Блокнот», напишите в ней первичную
структуру документа:
<HTML>
<HEAD>
<TITLE> название документа</TITLE>
</HEAD>
<BODY> сам документ</BODY>
</HTML>
Сохраните файл в формате .txt для дальнейшей правки, а также в формате
.htm и откройте сохраненный в формате .htm файл с помощью браузера
(например, с помощью Internet Explorer). Созданный файл будет содержать
название (в верхней строке окна браузера) и тот текст, который был
написан между тэгами <BODY> и </BODY>.
1.2. Форматирование шрифта в HTML-документе
Шрифт
HTML-документа
можно
изменять
по
следующим
параметрам: размер, начертание, гарнитура. От настроек этих параметров
во многом зависит, будет ли текст читабельным. Визуализация текста
влияет на его содержание. Не рекомендуется:
— делать шрифт очень маленьким (за исключением тех случаев,
когда информация не имеет особого значения): чтение текста с таким
шрифтом может утомить пользователя со слабым зрением;
— делать шрифт очень большим (за исключением тех случаев, когда
нужно
выделить
какой-либо
информативный
9
фрагмент):
текст,
написанный
большим
шрифтом,
создает
впечатление
кабинета
офтальмолога и за редким исключением ухудшает дизайн сайта;
— делать шрифт разнородным по стилю, это утомляет читающего.
Гарнитуру шрифта лучше подбирать согласно тематике сайта.
Например, научные тексты не будут смотреться, если они отображены
шрифтом Comic, а молодежный сайт будет диссонировать со шрифтом
Bookman Old Style.
Шрифты делятся на шрифты с засечками (serif) и рубленые шрифты
(sans serif). Шрифты с засечками характеризуются маленькими декоративными
элементами у каждой буквы, которые и называются засечками. Примером
шрифта с засечками может служить шрифт Times. Рубленые шрифты
засечек не имеют (пример — Helvetica).
Принято считать, что рубленые шрифты сильнее утомляют глаза,
чем шрифты с засечками, так как засечки помогают вести взгляд
читающего по тексту. По этой причине при публикации больших объемов
текста используются шрифты с засечками. Более четкие, заметные и менее
загруженные дополнительными элементами формы рубленых шрифтов
используются, как правило, для заголовков статей или дисклаймеров.
Использовать подчеркивание, выделение жирным и курсивом
необходимо также в разумных пределах; насыщение этими эффектами
может отвлечь от сути передаваемой информации.
Курсив смотрится
особенно плохо при маленьком размере шрифта из-за сложности его
визуализации с помощью квадратной пиксельной сетки. Если курсив
необходим, надо стараться оформлять им только небольшие объемы
текста.
Не следует увлекаться эффектом бегущей строки — это заставляет
читателя ждать, пока будет выдана полная информация, что часто
раздражает в связи с лимитом времени, выделенного на просмотр.
10
По сути, это общие рекомендации, но не аксиомы. Право выбора
всегда остается за автором сайта.
Размер
Существует несколько способов изменения размера шрифта:
1. С помощью тэгов <Hi> и </Hi>, где i принимает значение от 1 до 6
(1 — самый крупный, 6 — самый мелкий).
Пример. Чтобы написать более крупными буквами фамилию человека и
более мелкими какие-нибудь данные о нем c помощью <Hi>,
необходимо поставить следующие тэги:
<H2>Иванов И. И.</H2><H4>родился в 1959 году</H4>
Тэги <Hi> и </Hi> созданы для выделения заголовков; их характерной
чертой является то, что все, написанное после закрывающего тэга </Hi>,
переходит на следующую строку.
2. С помощью тэгов <FONT SIZE=±i> и </FONT>, где i принимает
значение от 1 до 7. 1 — наименьший размер, 7 — наибольший, 3 —
нормальное значение (размер шрифта в браузерах — по умолчанию);
каждый следующий размер на 20% больше предыдущего.
Пример. Чтобы написать более крупными буквами фамилию человека и
более мелкими какие-нибудь данные о нем с помощью <FONT SIZE>,
необходимо поставить следующие тэги:
<FONT SIZE=+1>Иванов И. И.</FONT><FONT SIZE=-1>родился в
1959 году </FONT>
Тэги <FONT SIZE=±i> можно использовать и в заголовках, и в
простом тексте; перенос на другую строку после закрывающего тэга
</FONT> не осуществляется.
11
3. Тэги <BIG> и </BIG> немного увеличат текст относительно заданного
по умолчанию. С помощью тэгов <SMALL> и <SMALL> можно
уменьшить текст относительно заданного по умолчанию.
Упражнение. Откройте сохраненный в блокноте файл со структурой
HTML-документа.
Отформатируйте
по
своему
усмотрению
текст,
вставленный между тэгами <BODY> и </BODY>. Сохраните файл в
формате .htm и посмотрите его через браузер. В окне браузера должен
появиться текст соответственно различного размера.
Начертание
Для изменения начертаний текста существует целый ряд тэгов:
тэги <B> и </B> делают текст жирным;
тэги <I> и </I> выделяют текст курсивом;
тэги <U> и </U> делают текст подчеркнутым;
тэги <STRIKE> и </STRIKE> делают текст перечеркнутым;
тэги <SUP> и </SUP> делают текст верхним индексом;
тэги <SUB> и </SUB> делают текст нижним индексом;
тэги <MARQUEE> и </MARQUEE> задают бегущую строку.
Фрагмент текста можно выделить сразу несколькими тэгами, в том
числе и тэгами размера. При этом последовательность открывающих и
закрывающих тэгов не принципиальна.
Пример. Для того, чтобы написать текст «Использование данных в
коммерческих целях допустимо.» жирным, маленьким, перечеркнутым
курсивом, необходимо поставить следующие тэги:
<B><SMALL><STRIKE><I>Использование данных в коммерческих
целях допустимо. </B></I></SMALL></STRIKE>
12
Упражнение. Откройте сохраненный в блокноте файл и отформатируйте
текст, вставленный между тэгами <BODY> и </BODY>, по начертанию.
Сохраните документ в формате .htm и посмотрите через браузер, что
получилось.
Гарнитура
Гарнитура шрифта задается следующими тэгами:
<FONT FACE="..."> и </FONT>
Вместо многоточия ставится название шрифта: Arial Cyr, Arial, Times
New Roman или какой-либо другой понравившийся. Если этот шрифт
стандартный, то он правильно отобразится на любом компьютере со
стандартной операционной системой, но если поставить какой-либо
оригинальный шрифт, не имеющийся в перечне стандартных, то он не
отобразится. Для адекватного просмотра документа придется скачивать
этот шрифт на компьютер пользователя.
Можно задать целый список
шрифтов: <FONT FACE=="Arial Cyr, Arial, Times New Roman">. В таком
случае браузер пользователя выберет из них первый шрифт, а если его нет
на компьютере пользователя, то следующий и т. д. Если не окажется ни
одного из шрифтов, браузер выберет шрифт, который в нем выставлен по
умолчанию.
Упражнение. Откройте сохраненный в блокноте файл и отформатируйте
гарнитуру текста, вставленного между тэгами <BODY> и </BODY>.
Сохраните документ в формате .htm и посмотрите через браузер, что
получилось.
13
1.3. Форматирование текста в HTML-документе
Форматирование текста — один из способов улучшения его
визуального восприятия. Аккуратный текст (разбитый на абзацы,
выровненный, с однородными знаками препинания и отступами и т. д.)
воспринимается гораздо лучше, чем текст в виде бесконечного потока.
Считается, что выравнивание текста по левому краю увеличивает скорость
чтения, так как ровный левый край помогает найти начало новой строки.
Основываясь на гипотезе о том, что человеческий глаз мгновенно
может сфокусироваться примерно на не более чем 7,5 см строки текста,
считается, что строка длиною в 8-10 слов (в среднем) увеличивает скорость
чтения и восприятия материала.
Если не ставить специальных тэгов, то текст HTML-документа
будет идти сплошным широким потоком, независимо от вводов,
поставленных для обрыва строки.
Для того, чтобы разбить текст на абзацы, существуют специальные
тэги:
<P> и </P>
Для того, чтобы оборвать строку и перейти на следующую,
необходимо
поставить
тэг
<BR>
(он
существует
без
парного
закрывающего тэга).
Абзац можно отформатировать по ширине, по центру, по правому
или левому краю:
<P AlIGN=JUSTIFY> и </P> — текст, помещенный между этими тэгами,
будет отформатирован по ширине;
<P AlIGN=CENTER> и </P> — текст, помещенный между этими тэгами,
будет отформатирован по центру;
<P AlIGN=LEFT> и </P> — текст, помещенный между этими тэгами,
будет отформатирован по левой стороне;
14
<P AlIGN=RIGHT> и </P> — текст, помещенный между этими тэгами,
будет отформатирован по правой стороне.
По умолчанию текст HTML выравнивается по левому краю. Поэтому
параметр ALIGN=LEFT можно не использовать.
Чтобы отформатировать весь текст, а не только абзацы, по центру,
его нужно поставить между следующими тэгами:
<CENTER>текст</CENTER>
Нужно отметить, что тэг <P> не всегда используется вместе с
парным ему тэгом. Парный тэг необходимо использовать, когда
добавляются параметры. Если же осуществляется простое разделение на
абзацы, то парный тэг необязателен.
Существует также тэг, отвечающий за горизонтальную черту:
<HR>
Он также, как и тэг <BR>, используется без парного ему тэга. Если
поставить этот тэг, будет создана горизонтальная черта шириной во весь
экран. Если необходимо создать черту, например, на 50% от ширины
экрана, то к тэгу <HR> добавляется параметр ширины WIDTH:
<HR WIDTH=50%>
Если необходимо создать широкую черту, то к тэгу <HR>
добавляется параметр размера SIZE (размер в данном случае задается
пикселями):
<HR SIZE=60>
Черту можно сделать черной, для этого добавляется параметр
NOSHADE, и выровнять, как и абзац, по центру, по правому или левому
краю:
тэг <HR NOSHADE> создает черную черту;
тэг <HR ALIGN=LEFT > выравнивает черту по левому краю;
тэг <HR ALIGN=RIGHT > выравнивает черту по правому краю;
15
тэг <HR ALIGN= CENTER> выравнивает черту по центру.
По умолчанию текст HTML выравнивается по левому краю. Поэтому
параметр ALIGN=LEFT можно не использовать.
Бывают случаи, когда необходимо отобразить весь текст в одной
строке (по умолчанию браузер сам форматирует текст внутри абзацев, то
есть сам делает переносы на новую строку). Для этого существуют тэги:
<NOBR> и </NOBR>
Если текст, заключенный между этими тэгами, не поместится на
экране,
то
браузер
добавит
в
нижней
части
окна
документа
горизонтальную полосу прокрутки. Если необходимо оборвать строку в
определенном месте, ставится тэг <BR>.
Например, если строка содержит название организации и его нельзя
разбивать, то надо поместить тэг <NOBR> перед этим названием и
закрывающий тэг </NOBR> в конце названия.
С помощью тэга <WBR> можно указать места, в которых
разрешается переносить текст в случае необходимости.
Списки
Списки
предназначены
для
представления
информации
в
упорядоченном виде. Существует три основных вида списков в HTMLдокументе: нумерованный, ненумерованный, список определений.
Можно создавать вложенные списки, используя различные тэги
списков или повторяя одни внутри других. Для этого необходимо
разместить одну пару тэгов (открывающий и закрывающий) внутри
другой. Будут ли элементы вложенного списка иметь те же маркеры,
обозначающие элемент списка, зависит от браузера.
Нумерованный список начинается открывающим тэгом <OL> и
завершается тэгом </OL>. Каждый элемент списка начинается с тэга <LI>.
16
Пример. Чтобы создать список:
1. Иванов
2. Петров
необходимо поставить следующие тэги:
<OL>
<LI>Иванов
<LI>Петров</OL>
В нумерованном списке автоматически выставляются номера по
порядку. Если удалить один или несколько элементов нумерованного
списка, то остальные номера автоматически будут изменены.
Ненумерованный список начинается открывающим тэгом <UL> и
завершается тэгом </UL>. Каждый элемент списка начинается с тэга <LI>.
В ненумерованных списках браузер обычно использует маркеры для
пометки элемента списка. Вид маркера, как правило, настраивает
пользователь браузера. Можно изменить вид маркера списка, добавив
параметр маркера к тэгу <UL>:
<UL TYPE=SQUARE> — тэг квадратного маркера;
<UL TYPE=CIRCLE> — тэг круглого маркера;
<UL TYPE=DISC> — тэг маркера по умолчанию.
Пример. Чтобы создать список:
 Иванов
 Петров
необходимо поставить следующие тэги:
<UL>
<LI>Иванов
<LI>Петров </UL>
17
Пример. Чтобы создать список:
 Иванов
 Петров
необходимо поставить следующие тэги:
<UL TYPE=SQUARE>
<LI>Иванов
<LI>Петров
</UL>
Список определений начинается открывающим тэгом <DL> и
завершается тэгом </DL>. Такой список служит для создания списков типа
«термин»-«описание». Каждый термин начинается тэгом <DT>, а
описание — тэгом <DD>.
Пример. Чтобы создать список:
Политика организации
Под политикой организации понимают систему правил, в
соответствии с которыми ведет себя организация в целом и по которым
действуют люди, входящие в эту организацию.
Стиль управления
Совокупность приемов, манера поведения руководителя по
отношению к подчиненным, позволяющие заставить их делать то, что в
данный момент необходимо в целях достижения определенного
результата.
необходимо поставить тэги:
<DL>
<DT> <B>Политика организации</B>
<DD>Под политикой организации понимают систему правил, в
18
соответствии с которыми ведет себя организация в целом и по которым
действуют люди, входящие в эту организацию.
<DT> <B>Стиль управления</B>
<DD> Совокупность приемов, манера поведения руководителя по
отношению к подчиненным, позволяющие заставить их делать то, что в
данный момент необходимо в целях достижения определенного
результата.
</DL>
Упражнение. Откройте сохраненный в блокноте файл со структурой
HTML-документа и создайте следующий вложенный список:
<H2>Список сотрудников нашей организации</H2>
<P> <SMALL>Список может быть использован только в служебных
целях.</SMALL> <P>
<OL>
<LI>Дирекция
<UL>
<LI>Иванов А.А.
<LI>Петров В.В.
</UL>
<LI>Служба управления персоналом
<UL>
<LI>Сидоров И. А.
<LI>Моржов В. И.
</UL>
</OL>
Придумайте свой вложенный список и напишите его на языке
HTML.
19
Специальные символы
Изначально предлагался набор специальных символов, которые
можно включать в HTML-документы, но некоторых знаков явно не
хватало. Например, язык HTML всегда уменьшал количество пробелов в
тексте до одного (независимо от того, сколько их поставлено). Поэтому,
чтобы поставить пробел, принудительно был введен специальный тэг:
 
Этот тэг необходимо ставить столько раз, сколько потребуется
пробелов.
Структура кода специальных символов отличается от структуры
других тэгов: здесь имеются обязательные знаки «&» и «;».
Наряду с этим символом в HTML были введены, например,
следующие специальные обозначения (см. табл. 1.1):
Таблица 1.1. HTML-коды специальных символов
Символ
HTML-код
Комментарий
"
"
Прямая кавычка
&
&
Амперсанд
<
<
Знак «меньше»
>
>
Знак «больше»
©
©
Знак «copyright»
¦
¦
Вертикальная черта
§
§
Знак параграфа
€
€
Евро
«
«
Левая типографская кавычка
»
»
Правая типографская кавычка
¬
¬
Знак отрицания
®
®
Знак (R)
°
°
Знак градуса
20
Символ
HTML-код
Комментарий
±
&plusm;
Знак «плюс-минус»
µ
µ
Знак «микро»
¶
¶
Знак абзаца
·
·
Точка-маркер
←
←
Стрелка влево
↑
↑
Стрелка вверх
→
→
Стрелка вправо
↓
↓
Стрелка вниз
↔
↔
Стрелка влево-вправо
™
™
Знак торговой марки
1.4. Изменение цвета в HTML-документе
Цвет с первых секунд просмотра сайта подсознательно закладывает
психологический настрой на изучение помещенной на нем информации.
Важно продумать, как будет сочетаться цветовая гамма с тематикой сайта.
Яркие цветовые пятна могут превалировать над содержанием сайта (хотя
иногда именно этот способ используется, чтобы отвлечь внимание от
содержания) или, если это сайт деловой кампании, создать неверное
впечатление о ней. Кроме того, яркие цвета быстро вызывают усталость
глаз, что не позволит посетителю долгое время находиться на сайте.
Мрачные цветовые тона часто создают депрессивное настроение (хотя для
соответствующей тематики — например, если сайт посвящен жертвам
Холокоста — именно эти тона и выбираются).
Важно также обращать внимание на сочетание цвета текста на сайте
с основным фоном: фон не должен перекрывать текст. Оптимальный
вариант для чтения длинных текстов: темное на светлом. Короткие тексты
21
(дисклаймеры, аннотации, заглавия, надписи в окнах меню и т д.) могут
быть написаны в контрасте: светлое на темном.
Цветовое решение сайта — серьезная дизайнерская задача. Она
требует тщательного рассмотрения многих психологических аспектов
восприятия цвета и художественно-оформительского чутья. И сколько бы
ни было дано рекомендаций на этот счет, конечное решение остается за
автором сайта.
Чтобы задать цветовые параметры всего документа, используется тэг
<BODY> (который задает начало тела HTML-документа), к нему
добавляются дополнительные тэги:
тэг <BODY BGCOLOR="#код цвета"> — задает цвет фона документа;
тэг <BODY TEXT="#код цвета"> — задает цвет текста документа;
тэг <BODY LINK="#код цвета"> — задает цвет гиперссылки;
тэг <BODY VLINK="#код цвета"> — задает цвет уже просмотренной ссылки;
тэг <BODY ALINK="#код цвета"> — задает цвет ссылки в момент нажатия на
нее.
«Код цвета» задается в шестнадцатеричном виде (шесть знаков) в
кодировке RGB. Можно написать и названия цветов (Black, Red и т п.), но
не все браузеры распознают эти названия цветов. Код цвета можно
посмотреть, например, в программе Photoshop на палитре цветов или
воспользоваться таблицей цветов (см. табл. 1.2).
Таблица 1.2. 16-ричные коды цветов
Название цвета
16-ричный код цвета
AliceBlue
AntiqueWhite
Aqua, Cyan
Aquamarine
Azure
Beige
#F0F8FF
#FAEBD7
#00FFFF
#7FFFD4
#F0FFFF
#F5F5DC
22
Название цвета
16-ричный код цвета
Bisque
Black
BlanchedAlmond
Blue
BlueViolet
Brown
BurlyWood
CadetBlue
Chartreuse
Chocolate
Coral
CornflowerBlue
Cornsilk
Crimson
DarkBlue
DarkCyan
DarkGoldenRod
DarkGray
DarkGreen
DarkKhaki
DarkMagenta
DarkOliveGreen
Darkorange
DarkOrchid
DarkRed
DarkSalmon
DarkSeaGreen
DarkSlateBlue
DarkSlateGray
DarkTurquoise
DarkViolet
DeepPink
DeepSkyBlue
DimGray
DodgerBlue
Feldspar
FireBrick
#FFE4C4
#000000
#FFEBCD
#0000FF
#8A2BE2
#A52A2A
#DEB887
#5F9EA0
#7FFF00
#D2691E
#FF7F50
#6495ED
#FFF8DC
#DC143C
#00008B
#008B8B
#B8860B
#A9A9A9
#006400
#BDB76B
#8B008B
#556B2F
#FF8C00
#9932CC
#8B0000
#E9967A
#8FBC8F
#483D8B
#2F4F4F
#00CED1
#9400D3
#FF1493
#00BFFF
#696969
#1E90FF
#D19275
#B22222
23
Название цвета
16-ричный код цвета
FloralWhite
ForestGreen
Fuchsia, Magenta
Gainsboro
GhostWhite
Gold
GoldenRod
Gray
Green
GreenYellow
HoneyDew
HotPink
IndianRed
Indigo
Ivory
Khaki
Lavender
LavenderBlush
LawnGreen
LemonChiffon
LightBlue
LightCoral
LightCyan
LightGoldenRodYellow
LightGrey
LightGreen
LightPink
LightSalmon
LightSeaGreen
LightSkyBlue
LightSlateBlue
LightSlateGray
LightSteelBlue
LightYellow
Lime
LimeGreen
Linen
#FFFAF0
#228B22
#FF00FF
#DCDCDC
#F8F8FF
#FFD700
#DAA520
#808080
#008000
#ADFF2F
#F0FFF0
#FF69B4
#CD5C5C
#4B0082
#FFFFF0
#F0E68C
#E6E6FA
#FFF0F5
#7CFC00
#FFFACD
#ADD8E6
#F08080
#E0FFFF
#FAFAD2
#D3D3D3
#90EE90
#FFB6C1
#FFA07A
#20B2AA
#87CEFA
#8470FF
#778899
#B0C4DE
#FFFFE0
#00FF00
#32CD32
#FAF0E6
24
Название цвета
16-ричный код цвета
Maroon
MediumAquaMarine
MediumBlue
MediumOrchid
MediumPurple
MediumSeaGreen
MediumSlateBlue
MediumSpringGreen
MediumTurquoise
MediumVioletRed
MidnightBlue
MintCream
MistyRose
Moccasin
NavajoWhite
Navy
OldLace
Olive
OliveDrab
Orange
OrangeRed
Orchid
PaleGoldenRod
PaleGreen
PaleTurquoise
PaleVioletRed
PapayaWhip
PeachPuff
Peru
Pink
Plum
PowderBlue
Purple
Red
RosyBrown
RoyalBlue
SaddleBrown
#800000
#66CDAA
#0000CD
#BA55D3
#9370D8
#3CB371
#7B68EE
#00FA9A
#48D1CC
#C71585
#191970
#F5FFFA
#FFE4E1
#FFE4B5
#FFDEAD
#000080
#FDF5E6
#808000
#6B8E23
#FFA500
#FF4500
#DA70D6
#EEE8AA
#98FB98
#AFEEEE
#D87093
#FFEFD5
#FFDAB9
#CD853F
#FFC0CB
#DDA0DD
#B0E0E6
#800080
#FF0000
#BC8F8F
#4169E1
#8B4513
25
Название цвета
16-ричный код цвета
Salmon
SandyBrown
SeaGreen
SeaShell
Sienna
Silver
SkyBlue
SlateBlue
SlateGray
Snow
SpringGreen
SteelBlue
Tan
Teal
Thistle
Tomato
Turquoise
Violet
VioletRed
Wheat
White
WhiteSmoke
Yellow
YellowGreen
#FA8072
#F4A460
#2E8B57
#FFF5EE
#A0522D
#C0C0C0
#87CEEB
#6A5ACD
#708090
#FFFAFA
#00FF7F
#4682B4
#D2B48C
#008080
#D8BFD8
#FF6347
#40E0D0
#EE82EE
#D02090
#F5DEB3
#FFFFFF
#F5F5F5
#FFFF00
#9ACD32
Примеры. Чтобы задать зеленый фон документа, необходимо поставить
тэг:
<BODY BGCOLOR="#008000">
Чтобы задать желтый фон документа и зеленый цвет текста в
документе, необходимо поставить тэг:
<BODY BGCOLOR="#FFFF00" TEXT="#008000">
Аналогично добавляется параметр для изменения цвета ссылок.
26
Если необходимо вместо фонового цвета повесить «подложкой»
графическое изображение, то лучше сохранить это изображение в той же
папке, где будет сохранен основной HTML-документ (иначе надо
указывать путь к файлу с изображением), и вставить его название в
следующий тэг:
<BODY BACKGROUND="имя файла.jpg">
Файл c фоновым изображением может быть задан в нескольких
форматах, лучшие из которых: .gif и .jpg.
Надо
предусмотреть
случай
просмотра
HTML-документа
с
отключенными картинками (нередко пользователи в целях экономии
трафика отключают опцию просмотра изображений) и задать фоновый
рисунок и цвет фона:
<BODY BGCOLOR="#008000" BACKGROUND="fonoviy_risunok.jpg">
Кроме тэга <BODY> цвет текста в любом месте можно менять и с
помощью тэгов <FONT> и </FONT>.
Пример. Чтобы в тексте «Сотрудники технического отдела:» слово
«технического» выделить красным цветом, необходимо поставить
следующие тэги:
Сотрудники <FONT COLOR="#FF0000">технического </FONT> отдела:
Одновременно можно изменять и размер, и цвет отдельного
фрагмента текста:
Сотрудники <FONT COLOR="#FF0000" SIZE=+4>технического </FONT>
отдела:
Упражнение. Откройте сохраненный в блокноте файл со структурой
HTML-документа, задайте определенные цвета фона и текста документа,
выделите отдельными цветами некоторые фрагменты текста.
27
1.5. Таблицы в HTML-документе
Таблицы разбивают пространство HTML-документа на строки и
столбцы. С их помощью можно достигать сложной компоновки объектов,
а можно использовать по прямому назначению: для разбивки текста на
колонки. В любом случае, таблица — это один из способов визуализации
текста. И от ее формата будет зависеть, какой именно информативный
фрагмент будет прочтен первым, а какой последним.
Таблица задается открывающим тэгом <TABLE> и закрывающим
тэгом </TABLE>. Между двумя этими тэгами помещаются тэги строк и их
ячеек, а также текстовая и графическая информация, предназначенная для
занесения в таблицу. Это важные тэги: если их не поставить, то другие
табличные тэги работать не будут.
В таблице необходимо задать строки. Тэг <TR> открывает строку,
</TR> — закрывает. Если в таблице присутствует два набора тэгов <TR> и
</TR>, в ней будут две строки, и т. д. Текст, другие тэги и параметры,
которые предназначены для данной строки, помещаются между тэгами
<TR> и </TR>.
Внутри каждой строки задаются ячейки. Каждая ячейка, как
содержащая текст или изображение, так и без него, должна быть окружена
тэгами <TD> и </TD>. Количество пар этих тэгов в строке определяет
число ячеек.
Среди табличных тэгов есть тэги, отвечающие за заголовок таблицы.
Это тэги <TH> и </TH>. Текст, помещенный между двумя этими тэгами,
по умолчанию помещается в центре ячейки и выделяется жирным
шрифтом.
Таким образом, простейшая схема таблицы выглядит следующим
образом:
28
<TABLE>
<TR>
<TD>Иванов</TD>
<TD>Петров</TD>
</TR>
<TR>
<TD>Сидоров</TD>
<TD>Моржов</TD>
</TR>
</TABLE>
Такой код задаст следующую таблицу без рамки:
Иванов Петров
Сидоров Моржов
Для того, чтобы создать вокруг таблицы рамку, используется
параметр BORDER=i,
где i задает толщину рамки вокруг таблицы в
пикселях. Если не задавать этот параметр или поставить его равным нулю,
то таблица будет без рамки.
Пример. Для того, чтобы создать таблицу с рамкой шириной в 10
пикселей, необходимо при задании таблицы поставить следующий тэг:
<TABLE BORDER=15>
Ширина и высота таблицы задается с помощью параметров WIDTH
и HEIGHT. Эти параметры могут быть зафиксированы как в пикселях, так
и в процентах от соответственно ширины и высоты экрана.
Пример. Для того, чтобы создать таблицу шириной в 800 пикселей,
необходимо при задании таблицы поставить следующий тэг:
<TABLE WIDTH=800>
29
Пример. Для того, чтобы создать таблицу шириной в 50% экрана
(независимо от разрешения экрана), необходимо при задании таблицы
поставить следующий тэг:
<TABLE WIDTH=50%>
Пример. Для того, чтобы задать ширину таблицы и размер рамки
вокруг нее, оба параметра, отвечающие за ширину, помещаются в тэг
<TABLE> через пробел в любой последовательности:
<TABLE WIDTH=800 BORDER=15>
Существуют параметры, форматирующие поля в ячейках:
CELLSPACING — определяет в пикселях ширину промежутков
между ячейками. Если этот параметр не задан, по умолчанию задается
величина, равная двум пикселям.
CELLPADDING — определяет ширину пустого пространства между
содержимым ячейки и ее границами, то есть задает поля внутри ячейки.
Эти параметры также помещаются в тэг <TABLE> через пробел в
любой последовательности:
<TABLE WIDTH=800 CELLSPACING=5 CELLPADDING=7 BORDER=15>
Содержимое ячеек можно форматировать по ширине с помощью
следующих параметров:
ALIGN=BLEEDLEFT — прижимает содержимое ячейки вплотную к
левому краю;
ALIGN=LEFT — выравнивает содержимое ячейки по левому краю с
учетом отступа, заданного параметром CELLPADDING;
ALIGN=CENTER — располагает содержимое ячейки по центру;
ALIGN=RIGHT — выравнивает содержимое ячейки по правому краю с
учетом отступа, заданного параметром CELLPADDING.
30
Эти параметры вносятся в тэг ячейки:
<TD ALIGN=LEFT >
Для форматирования содержимого ячейки по вертикали существуют
следующие параметры:
VALIGN=TOP — выравнивает содержимое ячейки по ее верхней границе;
VALIGN=MIDDLE — центрирует содержимое ячейки по вертикали;
VALIGN=BOTTOM — выравнивает содержимое ячейки по ее нижней
границе.
Эти параметры также вносятся в тэг ячейки:
<TD VALIGN=MIDDLE>
Можно
вносить
оба
параметра
одновременно
в
любой
последовательности:
<TD VALIGN=MIDDLE ALIGN=LEFT>
Любой таблице (как в целом, так и для каждой ячейки отдельно)
можно присвоить свой цвет фона (он не будет зависеть от фона всей
страницы) и свою «подложку».
Примеры. Чтобы задать цвет всей таблицы, например, черным,
необходимо в тэг <TABLE> поместить следующее:
<TABLE BGCOLOR="#000000">
Чтобы сделать фоновое изображение у таблицы, необходимо в тэг
<TABLE> поместить следующее:
<TABLE BACKGROUND="имя_файла.gif">
При этом фоновое изображение должно быть сохранено в той же
папке, что и основной HTML-документ (иначе надо указывать путь к
файлу с изображением). Файл c фоновым изображением может быть задан
в нескольких форматах, лучшие из которых: .gif и .jpg.
31
Упражнение. Откройте сохраненный в блокноте файл со структурой
HTML-документа. Продумайте, как разделить пространство экрана с
помощью таблицы так, чтобы выделенные ячейки таблицы представляли
собой
функциональные
области
под
рисунки
и
текст.
Согласно
продуманному плану, напишите HTML-код таблицы и занесите в ячейки
отформатированный ранее текст. Сохраните файл для последующей
работы.
1.6. Форматирование графических изображений
в HTML-документе
Графические изображения — важный элемент дизайна сайта,
поэтому им уделяется особое внимание. При этом зачастую они
составляют значительную часть размера сайта по весу. Если графические
изображения очень большие, просмотр HTML-документа может быть
осложнен из-за длительной загрузки этих изображений. Поэтому вес
графических файлов необходимо уменьшать.
За вывод изображения на экран отвечает следующий тэг:
<IMG SRC="имя файла.jpg">
Файл c изображением может быть задан в нескольких форматах,
лучшие из которых: .gif и .jpg. Он должен быть сохранен в той же папке,
что и основной HTML-документ (как и в случае загрузки графического
файла фоновым изображением документа или таблицы), иначе надо
указывать путь к файлу. Закрывающий тэг к тэгу <IMG SRC=…> не
требуется.
Для уменьшения времени загрузки HTML-документа с графикой
можно определить в HTML-коде размер изображений. Если размер
графического изображения определен, то браузер резервирует для него
место в виде ограничивающего прямоугольника. Пока загружается
32
графика, можно начать читать текст. Для этого в тэге изображения
задается ширина и высота картинки в пикселях следующим образом:
<IMG SRC="имя файла.jpg" WIDTH=… HEIGHT=…>
Пример. Если необходимо вставить рисунок logotip.gif размером
300х150 пикселей, в HTML-коде пишется следующее:
<IMG SRC="logotip.gif" WIDTH=300 HEIGHT=150>
Если не указать размеры графических изображений, то браузер будет
загружать каждую картинку целиком и только после этого переходить к
загрузке текста, что требует дополнительного времени. Если эти размеры
заданы и на страничке есть другие графические объекты или текст, то
браузер начертит ограничивающий прямоугольник (отведет на страничке
место под графический файл) и продолжит работу с другими частями
страницы, одновременно продолжая заполнять начерченный прямоугольник.
Нередко бывают случаи, когда картинке требуется дать название с
целью
раскрытия
пользователю
смысла
представленного
на
ней
изображения. Ее можно подписать текстом, как это делается в книгах или
журналах. Для того, чтобы название картинки выводилось при наведении
на нее мышкой, необходимо поставить соответствующий параметр ALT.
Кроме смыслового дополнения к картинке этот параметр позволяет
пользователям, отключающим в браузере режим просмотра графических
изображений, получить информацию о том, что изображено на картинке и
надо ли ее загружать.
Пример. Если необходимо вставить рисунок logotip.gif размером 300х150
пикселей и дать ему название «Наш логотип», ставятся следующие тэги:
<IMG SRC="logotip.gif" WIDTH=300 HEIGHT=150 ALT="Наш логотип">
33
Иногда дизайн HTML-документа требует рамку вокруг изображения.
Для этого существует параметр BORDER=i, где i — количество пикселей
толщины рамки вокруг изображения. Если BORDER не указан или его
значение равно нулю, то рамки вокруг изображения не будет.
Пример. Если необходимо вставить рассмотренный в предыдущих
примерах рисунок и обвести его рамкой толщиной 5 пикселей, в HTMLкоде пишется следующее:
<IMG SRC="logotip.gif" WIDTH=300 HEIGHT=150 ALT="Наш
логотип" BORDER=5>
Последовательность параметров
WIDTH, HEIGHT,
ALT и
BORDER не принципиальна.
Важно предусмотреть расположение изображения по отношению к
основному тексту. При помощи табличных тэгов можно разграничить
пространство так, чтобы изображение располагалось в одной ячейке, а
текст — в другой. Но язык HTML позволяет выполнять функцию
обтекания изображения текстом. Для этого предусмотрен параметр
ALIGN, который выставляется в тэге <IMG SRC=…>.
Если выставить ALIGN=LEFT, изображение окажется слева от
текста; текст будет справа и под изображением (если объем текста больше
высоты изображения).
Если выставить ALIGN=RIGHT, изображение окажется справа от
текста; текст будет слева и под изображением (если объем текста больше
высоты изображения).
Если выставить ALIGN=CENTER, изображение окажется в центре
текста; текст будет обтекать изображение с двух сторон и спускаться вниз
(если объем текста больше высоты изображения).
34
А
если
выставить
ALIGN=TOP
или
ALIGN=BOTTOM,
то
последующий текст расположится в верхней или соответственно нижней
части изображения.
Пример. Если необходимо вставить фотографию сотрудника (файл
ivanov.gif, размером 300х450) слева от текста с биографией этого
сотрудника, то в HTML-коде это запишется следующим образом:
<IMG
SRC="ivanov.gif"
WIDTH=300
HEIGHT=450
ALT="Сотрудник Иванов И. И." ALIGN=LEFT>Иванов Иван Иванович
родился
в
1959
году.
Окончил
Московский
государственный
университет, и т. д.
Сам
текст
можно
отформатировать
с
помощью
тэгов,
рассмотренных в разделе «Форматирование текста», а можно выделить
отдельные фрагменты текста с помощью тэгов, рассмотренных в
разделе «Форматирование шрифта».
Чтобы текст, обтекающий изображение, был более читабельным,
необходимо
поставить
отступы
между
изображением
и
текстом.
Следующие параметры задают ширину горизонтальных и вертикальных
полей, отделяющих изображение от текста:
HSPACE=i — горизонтальный отступ изображения от текста;
VSPACE=i — вертикальный отступ изображения от текста;
(i — количество пикселей отступа).
Пример. Если необходимо вставить фотографию сотрудника (файл
ivanov.gif, размером 300х450) справа от текста с биографией этого
сотрудника, с отступами в 10 и 15 пикселей по горизонтали и вертикали
соответственно, то в HTML-коде это запишется следующим образом:
35
<IMG SRC="ivanov.gif" WIDTH=300 HEIGHT=450 ALT="Сотрудник Иванов
И. И." ALIGN=RIGHT HSPACE=10 VSPACE=15>Иванов И. И. родился в
1959 г. Окончил Московский Государственный Университет, и т. д.
Упражнение. Откройте сохраненный в блокноте файл со структурой
HTML-документа, тэгами таблицы и внесенным отформатированным
текстом. Добавьте согласно продуманному плану в пустые области
графические изображения. Должна получиться оформленная страница
сайта.
Придумайте
структуру
еще
одной
страницы,
тематически
дополняющую данную. Cоздайте эту страницу согласно задуманному.
Сохраните оба файла для последующей работы.
1.7. Гиперссылки в HTML-документе
Гиперссылка — это интерактивное перемещение позиции пользователя
в электронном тексте. Аналогом могут служить сноски в книгах или
отсылки в рамках одной энциклопедии с одной статьи на другую. В
данном случае это — переход с одного HTML-документа на другой или
перемещение в рамках одного документа. Гиперссылки необходимы для
любого сайта. Если сайт состоит из нескольких страниц, то переход с
одной страницы на другую осуществляется с их помощью. Поисковые
роботы, переходя по гиперссылкам с главной страницы сайта на другие,
стараются проиндексировать весь сайт. Если же поисковый робот не
может перейти по ссылке, то определенная часть сайта не будет
проиндексирована и станет недоступной ищущим информацию через
поисковые системы.
Кроме того, нередко возникает необходимость делать переход с
одного сайта на другие сайты (это могут быть сайты-партнеры или сайты с
нужной информацией). Гиперссылки делают текст интерактивным. Если,
36
например, в тексте проставлены гиперссылки на определения всех
незнакомых слов, то он становится более читабельным. А если с главной
страницы сайта организации есть переход на другие страницы с
информацией о ее продукции, персонале и т. д., то такой сайт выгодно
отличается от примитивного
сайт-визитки. Вся
современная
сеть
построена на гиперссылках: Интернет — это большой гипертекст. Но не
надо перенасыщать ими сайт просто ради того, чтобы осуществлялся хоть
какой-нибудь переход в другое место. Гиперссылки должны вести только к
необходимой дополнительной информации, иначе пользователю надоест
блуждать по бесконечным просторам ненужной информации.
В гиперссылке перехода с одного HTML-документа на другой в
рамках одного сайта используются следующие тэги:
<A HREF="ИМЯ ФАЙЛА">название гиперссылки</A>
В кавычках указывается имя того документа, на который надо
перейти. Название гиперссылки дается, исходя из общего информативного
смысла документа, на который осуществляется переход. Пользователь
видит только название гиперссылки — ту надпись, которая помещена
между тэгами <A HREF=…> и </A>. При этом документ, с которого
осуществляется переход, и документ, на который осуществляется переход,
необходимо сохранить в одной папке, иначе придется прописывать путь к
документу, на который осуществляется переход.
Примеры. Если созданы два HTML-документа, один из которых
является главной страницей сайта и называется, например, main.htm, а
второй — страницей с контактными данными о владельцах сайта и
называется contacts.htm, то для перехода с главной страницы на
страницу с контактными данными необходимо в документе main.htm
поставить следующие тэги:
<A HREF="contacts.htm">Наши контакты</A>
37
Пользователь, кликнув мышкой по надписи «Наши контакты», попадет
на страницу с контактными данными.
Для перехода со страницы с контактными данными на главную
страницу необходимо в документе contacts.htm поставить следующие
тэги:
<A HREF="main.htm">На главную страницу</A>
Пользователь, кликнув мышкой по надписи «На главную страницу»,
попадет на главную страницу.
В гиперссылке перехода с одного HTML-документа на другой, уже
имеющийся в Интернете, вместо имени файла указывается его URL
(Universal Resource Location — универсальный локатор ресурса — адрес
документа в Интернете с указанием протокола).
Пример. Если требуется в HTML-документе main.htm сделать гиперссылку
на поисковик yandex.ru, то в документе main.htm необходимо поставить
следующие тэги:
<A HREF="http://www.yandex.ru">Перейти на Yandex</A>
Пользователь, кликнув мышкой по надписи «Перейти на Yandex», попадет
на поисковик yandex.ru.
Для перехода в рамках одного HTML-документа с одного места на
другое необходимо сделать две операции:
1) поставить метку в том месте HTML-документа, куда надо осуществить
переход;
2) поставить гиперссылку на эту метку в том месте, откуда будет
осуществлен переход.
Метка записывается в формате:
<A NAME="МЕТКА">
38
В кавычках пишется любое имя, состоящее из букв латинского
алфавита и/или цифр. Закрывающего тэга у метки нет.
Гиперссылка в данном случае будет иметь вид:
<A HREF="#МЕТКА">Перейти на метку </A>
Пример. Если требуется в статье:
Главной характерной чертой гипертекста, по определению Теодора
Нельсона[1],……
сделать гиперссылку на сноску:
[1] Теодор Нельсон – математик и философ, ввел в употребление само
слово "Гипертекст".
то ставится метка:
<A NAME="SNOSKA1">[1] Теодор Нельсон – математик и философ,
ввел в употребление само слово "Гипертекст".
и гиперссылка:
Главной характерной чертой гипертекста, по определению Теодора
Нельсона<A HREF="# SNOSKA1"> [1]</A>,……
Пользователь, кликнув мышкой по сноске [1] в статье, попадет на саму
сноску внизу статьи.
Для перехода с одного HTML-документа на определенное место в
другом необходимо проделать аналогичные операции:
1) поставить метку в том месте HTML-документа, куда надо осуществить
переход;
2) поставить гиперссылку на эту метку в том месте, откуда будет
осуществлен переход.
Метка записывается в прежнем формате:
<A NAME="МЕТКА">
А гиперссылка будет иметь вид:
39
<A HREF="ИМЯ ФАЙЛА#МЕТКА">Перейти на метку </A>
Вместо имени файла может быть прописан URL HTML-документа, на
который осуществляется переход.
Местом для перехода с одного HTML-документа на другой может
служить графическое изображение. Этим пользуются для создания кнопок
меню или, например, для отсылки с маленькой картинки на оригинальный
большой размер. Гиперссылка в этом случае записывается следующим
образом:
<A HREF="ИМЯ ФАЙЛА"><IMG SRC="ИМЯ ФАЙЛА С
ГРАФИЧЕСКИМ ИЗОБРАЖЕНИЕМ"> </A>
В кавычках рядом с A HREF пишется название документа (или его
URL), на который осуществится переход от изображения. В кавычках
рядом с IMG SRC пишется имя файла с изображением, от которого
осуществится переход. Пользователь, кликнув мышкой по изображению,
попадет в другой документ, имя которого (или URL) указано в
гиперссылке рядом с A HREF.
Упражнение. Откройте сохраненные в блокноте файлы с оформленными
страницами сайта. Поставьте гиперссылки с первого файла на второй и
наоборот.
1.8. Метатэги
Заполнение метатэгов придумано для описания содержимого страницы
сайта. Это необходимо поисковым системам: так как метатэги облегчают
работу поискового робота. Однако усилиями спамеров поисковые системы
были вынуждены практически исключить ключевые слова и описания из
рассмотрения
при
индексировании
страниц,
чтобы
сохранить
релевантность списка результатов поиска. Однако метатэги все еще
40
остаются мощным средством для презентации сайта в Интернете.
Метатэги — <META…> помещаются в заголовке HTML-документа
внутри блока <HEAD></HEAD>.
Для описания ключевых слов страницы введен параметр KEYWORD
(список ключевых слов к странице). Любое ключевое слово, упомянутое на
сайте, должно быть включено в этот тэг. И, соответственно, вписанное в
этот тэг слово должно упоминаться на сайте. Определять ключевые слова
надо точно, избегая общих формулировок, иначе страница потеряется в
общем потоке других сайтов. При определении необходимо избегать
повторений. Упомянутое более трех раз слово может быть рассмотрено
поисковиком как спам. Имена, географические названия лучше записывать
и с прописной буквы, и с заглавной потому, что большинство запросов в
поисковых машинах делается прописными буквами.
Поисковые роботы читают ограниченное число символов в каждом
тэге (обычно не более двухсот). Поэтому ключевые слова лучше
прописывать без знаков препинания, чтобы они не занимали место в
линейке символов, а оставляли его для слов.
Надо помнить и о возможных ошибках в написании слов.
Существует множество популярных ошибок в написании слов. Например,
слово «математика» нередко пишут как «матиматика» (за июль 2006 г.
запросов на слово «матиматика» в Yandex около 500). Выделяются
следующие ошибки, связанные с быстрым набором на клавиатуре:
пропущенные буквы и пропущенный пробел между словами; сдвоенные
буквы; изменение порядка букв; лишние буквы, находящиеся рядом с
нужными и случайно нажатые; написание слов c непереключенной
раскладкой клавиатуры. Также есть ошибки грамматические. Таким
образом, можно задать специально неправильно написанное ключевое
слово в поиске на Yandex, и если выяснится, что запросов с таким
41
написанием достаточно много, стоит включить его в ключевые слова
наряду с правильно написанным.
Формат метатэга ключевых слов выглядит следующим образом:
<META NAME="KEYWORD" CONTENT="ключевые слова">
Для описания содержания страницы введен параметр DESCRIPTION
(краткое описание страницы). Описание должно быть лаконичным.
Большинство поисковиков читает более 170 символов в этом тэге, но в
списке показывают только 170 символов. Описание должно выглядеть
призывно, оригинально, но оставаться соответствующим тематике сайта.
Например, описание типа «Мы поможем Вам разбогатеть!» вряд ли
проассоциируется с конкретным сайтом и будет выглядеть как спам.
Формат метатэга описания выглядит следующим образом:
<META NAME="DESCRIPTION" CONTENT="краткое описание">
Также метатэги можно применять и в других целях. Например, для
того, чтобы браузер определил кодировку HTML-документа. В этом случае
необходимо добавить еще и такой тэг для кодировки Windows-1251:
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=windows-1251">
или для кодировки Koi8-r:
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=koi8-r">
Иногда необходимо поставить переадресацию на другую страничку.
Для этого ставится следующий тэг:
<META HTTP-EQUIV="refresh" CONTENT=i url="URL перехода">
где i - время (в секундах), через которое осуществится переход.
Если убрать параметр url="URL перехода", страничка просто
перегрузится через время, равное i.
42
1.9. Фрэймы
Фрэймы (frames) — это окна или рамки, отдельные области
на
экране браузера. При вводе тэга <FRAME> браузер загружает разные
страницы в разные окна экрана. Например, можно построить страницу
сайта таким образом, что одна его часть зафиксируется в верхней части
экрана, а другая — будет пролистываться обычным способом. Расположение
кадров на экране задается почти также, как ячейки в таблице. Однако
содержимое ячеек задается в коде HTML-документа вместе с кодом
таблицы. А содержимое кадров экрана описывается в HTML-документах,
отдельных от HTML-документа с описанием структуры (frameset) экрана.
Framеset определяет только способ организации экрана с кадрами и
указывает, где находится содержимое каждого кадра. Фрэймы имеют
следующие свойства:
 каждый фрэйм имеет свой URL, что позволяет загружать его
независимо от других фрэймов;
 каждый фрэйм имеет собственное имя (параметр NAME),
позволяющее переходить к нему из другого фрэйма;
 размер фрэйма может быть изменен пользователем прямо на
экране при помощи мышки (если это не запрещено указанием
специального параметра).
Сначала необходимо продумать, где и какого размера будут фрэймы
и каково их содержание.
HTML-cтруктура
фрэймового
документа
внешне
похожа
на
структуру обычного HTML-документа, только вместо тэга <BODY>
используется тэг <FRAMESET>:
<HTML>
<HEAD>...</HEAD>
<FRAMESET>...</FRAMESET>
43
</HTML>
Тэг <FRAMESET> имеет следующие параметры:
ROWS=, задающий число и размер строк на странице;
COLS=, задающий число и размер столбцов.
После знака равенства определяется размер каждой строки (столбца)
в пикселях, процентах от высоты (ширины) экрана или в относительных
величинах (обычно это — указание занять оставшуюся часть места).
Важно правильно проставить все кавычки, запятые и оставлять пробелы
между значениями параметров.
Примеры. Если требуется создать экран, состоящий из трех строк
высотой 250, 300 и 100 пикселей, необходимо написать следующее:
<FRAMESET ROWS="250, 300, 100">
Если требуется создать экран, состоящий из трех строк высотой 30%,
35%, 35% от общей высоты экрана, необходимо написать следующее:
<FRAMESET ROWS="30%, 35%, 35%">
Примеры. Если требуется создать экран, состоящий из двух строк, так,
чтобы первая строка имела высоту 400 пикселей, а вторая занимала
оставшуюся часть экрана, необходимо написать следующее:
<FRAMESET ROWS="400, *">
Если требуется создать экран, состоящий из трех строк, так, чтобы
первая строка имела высоту 250 пикселей, а вторая занимала в два раза
больше места, чем третья, необходимо написать следующее:
<FRAMESET ROWS="250, 2*, *">
Число 2 перед знаком * показывает, что соответствующая строка (в
данном случае — средняя) занимает в два раза больше оставшегося
места на экране, чем нижняя. Это значение относительно, оно зависит
от размера экрана пользователя.
Для столбцов задание параметров осуществляется аналогично.
44
Между тэгами <FRAMESET> и </FRAMESET> могут находиться
только: тэг <FRAME>, вложенные тэги <FRAMESET> и </FRAMESET>, а
также тэги <NOFRAME> и </NOFRAME>, которые позволяют строить
двойные документы для браузеров, поддерживающих фрэймы и не
поддерживающих фрэймы.
Тэг <FRAME> определяет внешний вид и поведение кадра. Этот тэг
не имеет парного тэга. Суть тэга <FRAME> в его параметрах; их шесть:
1. NAME — параметр описывает имя фрэйма, которое может быть
использовано для определения действия с данным фрэймом из другого
HTML-документа или фрэйма, как правило, из соседнего фрэйма этого
же документа. Имя обязательно должно начинаться с символа.
2. MARGINWIDTH
—
действует
аналогично
параметру
таблиц
CELLPADDING. Он задает отступ между содержимым кадра и его
границами сбоку. Наименьшее его значение равно 1 пикселю.
3. MARGINHEIGHT — действует так же, как и MARGINWIDTH, но
задает поля в верхней и нижней части кадра. Наименьшее его значение
также равно 1 пикселю.
4. SCROLLING — отвечает за полосу прокрутки у кадра. Он может
принимать значения:
YES - полоса всегда присутствует;
NO - полосы никогда не будет;
AUTO - полоса появится по мере необходимости.
5. NORESIZE — позволяет создавать фрэймы без возможности изменения
размеров. По умолчанию, размер фрэйма можно изменить при помощи
мышки так же просто, как и размер окна Windows. NORESIZE отменяет
данную возможность.
45
6. SRC — применяется для того, чтобы определить, какая страница (на
начальном этапе) должна появиться в том или ином кадре.
Пример кадровой структуры:
<HTML>
<FRAMESET ROWS=*,*">
<FRAMESET COLS="60%, 40%">
<FRAME SRC="link1.html" MARGINWIDTH=15>
<FRAME SRC="link2.html" MARGINWIDTH=15>
</FRAMESET>
<FRAMESET COLS="*, 50%, *">
<FRAME SRC="link3.html" MARGINWIDTH=5>
<FRAME SRC="link4.html" MARGINWIDTH=5>
<FRAME SRC="link5.html" MARGINWIDTH=5>
</FRAMESET>
</FRAMESET>
<NOFRAMES>
<H1>
Ваш браузер не поддерживает кадровую структуру, поэтому Вы не
можете видеть содержимое разделов. Если возможно, то включите
режим кадров. </H1>
</NOFRAMES> </HTML>
Надпись в тэгах <Hi> делается на тот случай, если у пользователя
отключен просмотр фрэймов.
Упражнение. Придумайте и создайте свою кадровую структуру на основе
приведенного примера. Продумайте содержание кадров согласно тематике
уже созданных HTML-документов. Сделайте гиперссылку с одного из уже
46
созданных
HTML-документов
на
данный
документ
с
фрэймовой
структурой.
1.10. Комментарии
При создании HTML-документов нередко возникает необходимость
поставить комментарии в коде страницы. Это полезно для того, чтобы
впоследствии быстро разобраться: где, в каком месте и что конкретно
написано. В языке HTML имеются специальные символы, определяющие
комментарии.
В начале комментария ставится следующее:
<!-Для закрытия комментария нужно поставить:
-->
Текст, заключенный между этими двумя группами символов, не
будет виден при просмотре HTML-документа через браузер, его можно
прочесть только в HTML-коде.
Пример.
<table> <!--Начало таблицы с данными о сотрудниках -->
<tr>
<td> Иванов</td>
</tr>
<tr>
<td> Петров</td>
</tr>
…..
Существует также пара тэгов комментариев:
<COMMENT> строка комментариев </COMMENT>
47
1.11. Общие рекомендации
Для того, чтобы грамотно использовать тэги языка HTML,
необязательно их заучивать наизусть; можно составить основной перечень
тэгов и использовать его по мере необходимости. Но для того, чтобы
понимать функциональную нагрузку каждого тэга, необходимо хотя бы раз
сделать сайт, HTML-код которого будет включать в себя необходимые для
усвоения тэги.
Самостоятельное создание сайта — это квалификационная работа
контент-менеджера. Для того, чтобы наполнять или редактировать
созданные кем-то сайты, важно знать, как они устроены: представлять их
структуру единым целым и одновременно комплексом составляющих,
устройство которых определяет это целое.
При создании сайта необходимо поставить цели:
1) сайт должен содержать информацию, представляющую интерес
для пользователя;
2) cайт должен быть удобен в использовании.
И согласно этим целям решить следующие задачи:
1) собрать информацию, соответствующую тематике сайта (тексты,
иллюстрации, Интернет-ресурсы);
2) отредактировать
стилистические
эту
и
информацию
грамматические
в
(исправить
ошибки,
текстах
иллюстрации
перевести в электронный вид, удобный для публикации в
Интернете, Интернет-ресурсы упорядочить и проверить их URL);
3) упорядочить
отредактированную
информацию
согласно
тематическим разделам;
4) составить план расположения тематических разделов;
5) согласно составленному плану разработать структуру сайта и его
дизайн.
48
2. Редактирование изображений с помощью программы
«Photoshop»
Программа Photoshop является продуктом Adobe Systems Inc. Эта
кампания разработала мощный комплект программ для издательского
дела: Photoshop, Illustrator, FrameMaker, InDesign, Acrobat и др., каждая из
которых выполняет свои функции в производстве высококачественных
изображений.
Photoshop предназначен для редактирования и создания растровой
графики (bitmapped images). Растровое изображение представляется в виде
прямоугольной матрицы, каждая ячейка которой представлена цветной
точкой, называемой пикселем.
Программа используется для обработки фотографий (ретушь,
цветовая
и
тоновая
коррекции, изменение резкости
и
размеров,
художественные эффекты, фотомонтаж и др.), создания иллюстраций и
анимации, а также изображений для WEB-страниц и т. п..
Photoshop обладает большим спектром возможностей, которые
расширяются
разработчиками
и
сторонними
кампаниями
за
счет
подключаемых программных модулей, адаптирующих программу для
решения многих специфических задач.
Для работы контент-менеджера оптимальным является комплексное
освоение возможностей Adobe Photoshop. Ни один сайт не может обойтись
без изображений. Качество изображений на сайте — один из основных
параметров его оценки.
Важными
характеристиками
изображения
являются:
размер,
резкость, яркость, контрастность, цветовой баланс.
Нередко для повышения качества изображения требуются более
сложные операции: коррекция отдельных частей изображения, удаление
дефектов, фотомонтаж. Эти операции требуют особых навыков, их
49
освоение может занять много времени, однако без них невозможна
эффективная работа с изображениями.
В данном пособии описаны основные опции программы Photoshop,
отвечающие за вышеперечисленные характеристики и операции, а также
даны некоторые рекомендации по оптимизации использования этих опций.
2.1. Начало работы и формат файлов
Для
редактирования
изображения
его
нужно
открыть
или
импортировать. Для того чтобы открыть изображение, используется
подменю меню File (рис. 2.1). Подменю Open откроет изображение в том
формате файла, в котором оно было сохранено. Подменю Open as при
открытии изображения предложит выбрать формат файла из списка
доступных для дальнейшей работы в программе. (О форматах файлов в
программе Adobe Photoshop будет сказано ниже; для первичного
знакомства с программой следует использовать подменю Open).
Рис. 2.1. Подменю «Открыть файл»
Изображение
можно
импортировать
из
другой
программы,
посредством WEB-камеры, сканера или других устройств, подключенных
к компьютеру. При нажатии File/Import будет высвечен перечень мест,
откуда можно импортировать изображение (рис. 2.2).
50
Рис. 2.2. Подменю импортирования изображения
Для создания нового изображения необходимо выбрать New в меню
File. Cохранить изображение можно с помощью нескольких опций, также
имеющихся в меню File: File/ Save или File/ Save As — сохранить изображение
с определенным именем и выбранным форматом файла (рис. 2.3).
File/ Save for Web — сохранить изображение для публикации на
сайте с определенным именем и выбранным форматом файла, используя
оптимизацию сжатия файла по весу (рис. 2.3). Нужно помнить, что после
сохранения файла с помощью этой опции, он будет сильно облегчен и его
нельзя будет качественно распечатать в типографии или фотолаборатории.
Для размещения изображений на сайтах лучше использовать опцию
сохранения File/Save for Web. При сохранении изображения посредством
опции File/Save или File/Save As файл будет очень «тяжелым» и
следовательно будет долго загружаться.
51
Рис. 2.3. Подменю «Сохранить файл»
Photoshop поддерживает целый ряд форматов файлов: BMP, GIF,
JPG, PDF, TIFF, PSD, RAW и др., из которых наиболее популярными для
размещения изображений на сайтах являются GIF и JPG, представляющие
уплотненную структуру файла, чем уменьшают его размер.
Формат GIF (Graphics Interchange Format) разработан кампанией
CompuServe, как не зависящий от аппаратного обеспечения. В одном
файле этого формата может храниться несколько изображений. Обычно
эта возможность используется для хранения изображений анимационного
типа.
GIF-формат позволяет записывать изображение «через строчку»
(Interlaced), благодаря чему, имея только часть файла, можно увидеть
изображение целиком, но с меньшим разрешением. Эта возможность
широко применяется в Интернете. Сначала загружается картинка с грубым
разрешением, а по мере поступления новых данных ее качество
улучшается.
Недостатком этого формата является то, что изображение не может
иметь более 256 цветовых оттенков. Поэтому GIF-формат не очень удобен
для хранения фотографий и изображений с тонкой цветовой палитрой.
52
Формат JPEG (Joint Photographic Experts Group) разработан
кампанией C-Cube Microsystems как эффективный метод хранения
изображений с большой глубиной цвета. Второй вариант формата — .jpg (с
пропущенной буквой «e»). В отличие от формата GIF формат JPEG
сохраняет всю информацию о цвете. Кроме того, формат JPEG использует
очень
эффективный
алгоритм уплотнения, который
нередко
дает
значительное сокращение (от 60%) объема начального файла за счет
удаления избыточной информации, не влияющей на видимое качество
отображения документа. При сохранении файла в формате JPEG можно
произвольно задать его ожидаемое качество и степень уплотнения. Чтобы
получить оптимальное качество цветов, нужно задать вариант Baseline
(Optimized). Повторить вышеуказанное свойство GIF-файлов можно, задав
вариант Progressive (в этом случае изображение будет условно разбито на
группы и при выводе изображения на экран сначала будут загружаться
первые строки из каждой группы, затем вторые и т.д., пока изображение не
будет загружено полностью).
JPEG-формат лучше использовать для хранения фотографий и
изображений с большим количеством цветов.
Родным форматом программы Adobe Photoshop является PSD. Он
позволяет записывать готовое растровое изображение со многими слоями,
дополнительными цветовыми каналами, масками и прочей информацией.
Файл сохраняют в этом формате, если впоследствии нужно вернуться к
истории его редактирования и внести в нее изменения. Этот формат
распознают некоторые другие программы, однако он не пригоден для
размещения изображения на сайте.
53
Упражнение. В программе Photoshop импортируйте отсканированное
изображение и сохраните его в форматах .gif и .jpg с минимальным весом и
максимальным качеством.
2.2. Изменение размера изображения
Для того, чтобы изменить размеры изображения по ширине и высоте,
используется опция Image Size в меню Image (рис. 2.4):
Рис. 2.4. Подменю изменения размера изображения
Опция Image Size имеет следующие параметры настройки (рис. 2.5):
Pixel Dimension — размер изображения по ширине (Width) и высоте
(Height) в пикселях. Эти параметры важны для изображений, которые
будут размещены на сайте.
Document Size — размер изображения по ширине (Width) и высоте
(Height) в физических единицах измерения (см, мм и т д.); эти параметры
изображения предназначены для его вывода на печать.
Resolution
—
разрешение
(плотность)
файла.
Эта
величина
измеряется количеством пикселей на единицу длины. Например, часто
разрешение измеряют в пикселях на дюйм (pixels per inch, ppi), 1 дюйм =
2,54 см. Изображениям для сайта обычно дается значение, равное 72 ppi.
54
Для качественной печати изображения его разрешение должно быть
равным 300 ppi.
Для того, чтобы при изменении ширины изображения пропорционально
изменялась его высота (и наоборот, при изменении высоты пропорционально
изменялась ширина), нужно поставить галочку рядом с пунктом Constrain
Proportions. Если
ширину и высоту изменять непропорционально,
изображение сплющится (такая операция тоже иногда бывает полезной).
Пункт Resample Image предназначен для того, чтобы сохранить
разрешение изображения при изменении ширины и высоты. Если
поставить галочку рядом с ним, то разрешение будет фиксированным.
Если галочку не ставить, разрешение будет меняться.
Рядом с Resample Image можно выбрать один из методов
интерполяции
при
изменении
размера
изображения:
Bicubic
(бикубическая) интерполяция наименее негативно влияет на качество
изображения.
Рис. 2.5. Окно настройки размеров изображения
55
Изменение размера изображения ухудшает его качество. Это важное
правило необходимо запомнить. При увеличении изображения его
качество ухудшается потому, что увеличивается количество пикселей
посредством
добавления
новых,
искусственных.
Вследствие
чего
изображение может выглядеть затуманенным или несфокусированным.
При уменьшении изображения его качество ухудшается потому, что
уменьшается количество пикселей; соответственно часть информации
теряется.
Для
масштабирования
в
программе
Photoshop
используется
интерполяция, в процессе которой к цветному изображению могут быть
добавлены новые или удалены «лишние» пиксели. Цвета дополнительных
пикселей определяются программой путем усреднения цветов соседних
пикселей, между которыми помещается новый пиксель.
Качество уменьшенного изображения можно в большой степени
восстановить с помощью соответствующих опций программы Photoshop.
Качество
увеличенного
изображения
восстановить
практически
невозможно. Поэтому опцию Image Size лучше использовать только для
уменьшения изображения или для его незначительного увеличения.
Ширину и высоту изображения можно отформатировать и тэгами
HTML
(см.
форматирование
графических
изображений
в
HTML-
документе), но при изменении размеров с помощью тэгов на экране
получится худшее качество изображения, поэтому лучше заранее
определиться с размерами изображения и отредактировать их в
графической программе, улучшив качество.
Упражнение. Откройте файл с изображением, увеличьте его размер;
посмотрите, как изменилось качество изображения. Отмените операцию
изменения размера посредством вкладки Edit/Step Backward. Уменьшите
56
изображение; посмотрите, как изменилось его качество. Что сильнее
изменило качество изображения: его уменьшение или увеличение?
Сохраните уменьшенное изображение с помощью опции Save As для
дальнейшего редактирования.
2.3. Увеличение резкости и размытие изображения
Резкость изображения — степень отчетливости границы между
деталями изображения. Изображение может быть изначально нерезким
вследствие ошибок, допущенных при его создании или сканировании.
Резкость изображения также теряется при его сильном уменьшении.
Повысить резкость в программе Photoshop можно с помощью
фильтров, которые накладываются на область изображения, или с
помощью инструмента резкости, который представляет собой кисть,
увеличивающую резкость в месте ее проведения и управляемую левой
кнопкой мышки.
Группа фильтров резкости называется Sharpen и находится в меню
Filter (рис. 2.6). От слова Sharp произошло слово «шарпить» —
профессиональный слэнг в обработке фотографий. Основным из этой
группы является фильтр
Unsharp Mask (нерезкая маска). Именно этот
фильтр отвечает за увеличение резкости изображения. Все прочие фильтры
в меню Sharpen — всего лишь вариации Unsharp Mask с фиксированными
настройками.
Повышение резкости реализуется через повышение контраста
соседних пикселей изображения, что визуально воплощается в проявлении
более четких контуров объектов. На самом же деле фильтр не разбирается,
где именно на изображении проходят границы объектов, а просто
сравнивает яркость соседних точек. Очень важно правильно подобрать
настройки фильтра Unsharp Mask. Настройки подбираются под каждое
57
изображение отдельно, опытным путем. Важно не «перешарпить»
изображение, иначе резкость будет уродовать контуры. Unsharp Mask
имеет три настройки (рис. 2.7):
Рис. 2.6. Подменю фильтра резкости
Amount — определяет «силу» воздействия фильтра;
Radius — контролирует размер воздействия, который создает эффект
повышения контраста;
Threshold — смягчает действие фильтра в тех местах, где повышение
резкости не требуется, например, на гладких участках кожи, составленной
из однородных пикселей.
Рекомендуется начинать с установки Amount=200 и Threshold=0.
Затем, изменяя Radius, добиваться желаемой резкости и, меняя Amount,
корректировать эффект более точно. После этого можно увеличить
Threshold, чтобы смягчить действие фильтра в тех областях, в которых
повышение резкости не требуется.
58
Рис. 2.7. Окно настройки резкости
Упражнение.
Откройте
сохраненный
файл
с
уменьшенным
изображением. Увеличьте его резкость поочередно с помощью Unsharp
Mask, подобрав параметры: Amount, Radius и Threshold. Отмените
операцию изменения резкости посредством вкладки Edit/ Step Backward.
Увеличьте резкость изображения поочередно с помощью фильтров
Sharpen, Smart Sharpen и других фильтров из группы Sharpen. Сравните
результаты.
Увеличить резкость отдельных элементов изображения можно с
помощью специального инструмента Sharpen Tool (рис. 2.8), который
представляет собой кисть, управляемую левой кнопкой мышки. Диаметр
кисти и силу ее воздействия можно изменить параметрами Brush и
Strength.
59
Рис. 2.8. Местоположение и настройки инструмента Sharpen Tool
Упражнение. Откройте файл с фотографией-портретом. С помощью
инструмента Sharpen Tool увеличьте резкость глаз и губ на портрете.
Подбирайте диаметр кисти Sharpen Tool и силу ее воздействия под размер
изменяемой по резкости области.
Размытие изображения — операция, обратная повышению резкости.
Существуют ситуации, когда размытие изображения или его частей
необходимо. Например, размытие морщин на портретах пожилых женщин
или размытие отдельных деталей изображения для визуального выделения
других, более резких. Размытие, как и повышение резкости, можно
производить с помощью фильтров, которые накладываются на область
изображения,
или
с
помощью
инструмента
размытия,
который
представляет собой кисть, увеличивающую размытие в месте ее
проведения.
Группа фильтров размытия называется Blur и находится в том же
меню Filter, что и фильтр резкости. Наиболее мягкий фильтр размытия из
60
этой группы — Gaussian Blur (Гауссово размытие). Этот фильтр при
маленьком радиусе воздействия создается эффект софт-фильтра и не
напрягает глаза смотрящего на изображение.
Размыть отдельные элементы изображения можно с помощью
специального инструмента Blur Tool (данный инструмент находится
рядом с инструментом Sharpen Tool), который представляет собой кисть,
управляемую левой кнопкой мышки. Диаметр кисти и силу ее воздействия
можно изменить параметрами Brush и Strength.
Упражнения.
Откройте
файл
с
фотографией-портретом
пожилого
человека. Примените фильтр Gaussian Blur с маленьким радиусом
воздействия. Сравните изображение до и после воздействия фильтра.
Примените к изображению другие фильтры группы Blur. Сравните
действие этих фильтров.
Откройте файл с фотографией-портретом пожилого человека. С
помощью инструмента Blur Tool размойте области морщин на лице
человека. (Подбирайте диаметр кисти Blur Tool и силу ее воздействия под
размер изменяемой по резкости области).
2.4. Цветокоррекция
Цвет — важная составляющая изображения. Однако его восприятие
субъективно. Для удобства цифровой передачи информации о цвете
используется несколько режимов его кодировки, основные из которых
RGB и CMYK.
RGB — аббревиатура от названий цветов: Red, Green, Blue (красный,
зеленый, синий), из соотношения которых строится цветовая точка. Эта
система адекватна цветовому восприятию человеческого глаза, рецепторы
которого тоже настроены на красный, зеленый и синий цвета. Поэтому
построение изображения на оптических приборах соответствует системе
61
RGB.
Изображения,
предназначенные
для
WEB,
рекомендуется
редактировать и сохранять именно в этом цветовом режиме.
CMYK — аббревиатура от названий цветов: Cyan, Magenta, Yellow,
Black (бирюзовый, пурпурный, желтый и черный — от слова Black взята
последняя буква), из соотношения которых строится цветовая точка. В
этой модели основные цвета образуются путем вычитания из белого цвета
основных цветов модели RGB: бирюзовый — как белый минус красный,
пурпурный — как белый минус зеленый, желтый — как белый минус
синий. Данный режим используется для полиграфии.
Переключение
цветовых
режимов
в
программе
Photoshop
осуществляется в подменю Mode меню Image (рис. 2.9).
Рис. 2.9. Подменю выбора цветового режима изображения
В программе Photoshop предусмотрено несколько опций для его
корректировки.
Бывают ситуации, когда изображение выигрывает в черно-белом
цвете. Чтобы произвести обесцвечивание, нужно выбрать Desaturate в
подменю Adjustments меню Image. Но черно-белое изображение также
нуждается в цветокоррекции.
62
Для изменения яркости и контрастности предусмотрена опция
Brightness/ Contrast (рис. 2.10), которую можно найти в подменю
Adjustments меню Image. Изменения этих параметров корректируются
разными ползунками, но результат изменения одного из ползунков зависит
от положения второго. При этом изменения будут сразу видны на самом
изображении. Программой предусмотрена автоматическая настройка
яркости и контрастности — Auto Contrast (находится в том же подменю,
что и Brightness/ Contrast), но ее использование может привести к
результату,
который
расходится
c
художественным
восприятием
пользователя программы. Поэтому лучше использовать опцию Brightness/
Contrast.
Рис. 2.10. Подменю опции яркости и контраста и окно их настройки
Для регулировки цветового тона и насыщенности применяется опция
Hue/ Saturation, которую, как и Brightness/ Contrast, можно найти в
подменю Adjustments меню Image. Hue/ Saturation имеет следующие
настройки (рис. 2.11):
63
Hue — меняет цвета по всей цветовой палитре (если установлен
режим редактирования Master; кроме этого режима предусмотрены
режимы изменения тона в рамках одного цвета).
Saturation — позволяет менять насыщенность цвета.
Lightness — позволяет увеличивать или уменьшать яркость
изображения с учетом Hue и Saturation.
Рис. 2.11. Окно настройки цветового тона и насыщенности
Рис. 2.12. Окно настройки цветового баланса
64
В программе предусмотрена также автоматическая Auto Color и
ручная балансировка цвета Color Balance (рис. 2.12) (их также можно
найти в подменю Adjustments меню Image), что позволяет задавать баланс
между парами цветов (желтым и синим, пурпурным и зеленым,
бирюзовым и красным) в областях теней (Shadows), средних тонов
(Midtones) или света (Highlights).
Levels имеют следующие параметры (рис. 2.13):
Input Levels (входные уровни) задаются тремя числами: уровнем
темных пикселей (левое поле), гаммой (среднее поле) и уровнем светлых
пикселей (правое поле). Эти данные указывают диапазон яркости
пикселей, которые будут подвергнуты изменению. Гамма определяет
уровень яркости средних тонов.
Output Levels (выходные уровни) задаются двумя значениями
диапазона яркости, в котором будут находиться преобразованные пиксели.
Вместо
ввода
числовых
значений
можно
воспользоваться
ползунками, расположенными ниже числовых полей, или пипетками (см.
рис. 2.13). Пипетками непосредственно на изображении можно указать,
какие пиксели будут черными (левой пипеткой), серыми (средней
пипеткой) и белыми (правой пипеткой).
Если созданные настройки Levels пригодятся впоследствии для
обработки другого изображения, они сохраняются кнопкой Save справа и
устанавливаются из сохраненного файла кнопкой Load.
Кнопка Auto осуществляет на изображении поиск пикселей
максимального и минимального значений яркости, которые затем
преобразуются в значения 255 и 0 соответственно, а все промежуточные
значения
яркостей
равномерно
распределяются
между
ними.
Автоматическую коррекцию уровней можно также выбрать в подменю
65
Adjustments меню Image. Кнопка Options предоставляет выбор алгоритма
преобразования пикселей.
Рис. 2.13. Окно настройки Levels
Curves задается в виде графика входных уровней по горизонтали и
выходных по вертикали (рис. 2.14). В исходном положении этот график
представляет собой прямую линию с наклоном 45 градусов (входные
уровни равны выходным). Внизу графика и справа от него отображается
шкала яркости. Кривую графика можно изменять различными способами.
Во-первых, ее можно нарисовать произвольно карандашом (карандаш
управляется левой кнопкой мышки), предварительно кликнув мышкой по
кнопке с изображением карандаша. Кнопка Smooth сгладит неровности на
нарисованной кривой. Во-вторых, можно кликом мышки указать на кривой
точки, а затем перетащить их мышкой в нужное место. В-третьих, можно
кликом мышки указать точки, которые не должны изменять своего
положения на кривой, а затем перетащить мышкой участки кривой между
66
этими точками. Кривая пройдет через все эти точки. Результатом является
изменение соответствия между входными и выходными значениями
яркости. Остальные кнопки справа аналогичны кнопкам настройки
уровней.
Рис. 2.14. Окно настройки Curves
Упражнение.
Откройте
файл
с
любым
изображением.
Сделайте
цветокоррекцию, используя ее автоматические настройки в подменю
Adjustments меню Image (Auto Levels, Auto Contrast, Auto Color). Сделайте
цветокоррекцию, используя ее ручные настройки в подменю Adjustments
меню Image (Levels, Curves, Brightness/Contrast, Color Balance, Hue
Saturation). Сравните полученные результаты.
67
2.5. Ретушь мелких дефектов
Ретушировать в программе Photoshop можно различными способами,
использованию большинства из которых можно научиться только после
комплексного освоения программы; однако в программе предусмотрено
два
инструмента,
освоение
которых
незатруднительно.
Это
—
инструменты Clone Stamp Tool, Healing Brush Tool и Patch Tool.
Clone Stamp Tool (клонирующий штамп) (рис. 2.15) используется
для фиксации клонируемого объекта и его переноса в нужную область
изображения. Например, чтобы на изображении убрать дефект в виде
пятна, клонируется область, находящаяся рядом с пятном, но не
включающая его, и эта область переносится на пятно. Клонирование
области осуществляется кликом мышки при нажатой клавише ALT. После
клонирования клавишу ALT нужно отпустить. Перенос в нужное место
осуществляется кликом мышки.
Данный инструмент имеет следующие настройки:
Brush — для выбора диаметра клонируемой области.
Opacity и Flow — для выбора степени прозрачности и плотности
нанесения клонируемой области: чем меньше проценты Opacity и Flow,
тем менее прозрачной и плотной будет нанесенная область.
Aligned — для создания единого неразрывного клона области,
связанного с одной исходной точкой (если рядом с Aligned стоит галочка)
или для создания нескольких клонов, соответствующих одной и той же
исходной точке (если рядом с Aligned не стоит галочка).
Mode — для выбора режима смешивания клонированной области с
областью, на которую она наносится (обычное, затемненное, осветленное и
проч. наложение).
Sample All Layers — для выбора пикселя со всех видимых слоев
(если рядом с Sample All Layers стоит галочка) или для выбора пикселя
68
только с активного слоя (если рядом с Sample All Layers не стоит галочка).
При простой ретуши существует только один слой, тогда эта опция не
принципиальна. (О слоях см. раздел 2.6.).
Рис. 2.15. Местоположение и настройки инструмента Clone Stamp Tool
Рис. 2.16. Местоположение и настройки инструмента Healing Brush Tool
Healing Brush Tool (лечащая кисть) (рис. 2.16) — является
разновидностью инструмента Clone Stamp Tool и имеет те же особенности
использования. Этот инструмент предназначен, в первую очередь, для
69
устранения таких дефектов изображения, как «шум», мелкие царапины,
следы пыли и т.п.; с его помощью восстанавливается изображение со
сложной текстурой. Инструмент Healing Brush имеет два режима работы:
Sampled (по образцу) и Pattern (текстурное). Режим Sampled делает Healing
Brush функционально похожим на Clone Stamp Tool с более аккуратными
клонированными областями. Режим Pattern задает клонирование готового
образца или палитры Pattern.
Инструмент Patch Tool (заплатка) создан для изменения достаточно
больших областей по образу и подобию имеющихся и пригодных служить
в качестве заплатки (рис. 2.17).
Рис. 2.17. Местоположение и настройки инструмента Patch Tool
При активизации этого инструмента мышкой выделяется пунктирная
область, которая:
в режиме Destination может быть перенесена на любое место
изображения, указанное кликом мышки;
70
в режиме Source может быть заменена фрагментом такой же формы,
как и сама пунктирная область, при указании этого фрагмента кликом
мышки.
Упражнение. Откройте файл с поврежденным изображением (на старых
фотографиях обычно образуется множество царапин, желтых пятен и
трещин). Используя инструменты Clone Stamp Tool, Healing Brush Tool и
Patch Tool, восстановите поврежденные участки. Сравните работу этих
инструментов.
2.6. Слои
Слои — это новые изначально прозрачные плоскости над исходным
изображением.
Само
изображение
представляет
собой
первый
(Background) слой. Слои заполняются и изменяются независимо друг от
друга и от начального изображения. Это свойство удобно использовать для
внесения больших изменений в изображение, для совмещения различных
изображений, а также для создания анимации. Когда работа со слоями
закончена, их соединяют в один слой.
Для создания нового прозрачного слоя в меню Layer выбирается
подменю New и в нем Layer. При этом на палитре слоев отобразится
появление нового слоя Layer 1 (рис. 2.18). Этот слой находится сверху
изображения
и
активирован
(активирование
слоя
отображается
выделенной полосой на слое): внесенные изменения коснутся только этого
слоя и будут видны поверх исходного изображения. Над слоем можно
производить следующие операции.
Слой можно отключить, кликнув мышкой по глазу слева от слоя; в
этом случае внесенные изменения не будут видны, а глаз рядом со слоем
исчезнет.
71
Слой можно удалить или скопировать, кликнув по нему правой
кнопкой мышки и выбрав в появившемся меню соответственно Delete
Layer или Duplicate Layer.
Можно уменьшить прозрачность и плотность его наполнения,
уменьшая показатели Opacity и Fill.
Рис. 2.18. Палитра слоев с отображением нового прозрачного слоя
Можно изменить режим его наложения на предыдущий слой. По
умолчанию в программе выставлен режим наложения Normal (обычный);
стрелка рядом с ним выдает меню перечня режимов наложения, из
которого можно выбрать Darken (затемнение), Lighten (осветление) и т д.
Для того, чтобы соединить слои в один слой, используется подменю
Flatten Image меню Layer. Если слоев много, выбирается один из трех
вариантов их соединения из меню Layer:
Flatten Image — соединить все имеющиеся слои;
72
Merge Visible — соединить только видимые слои, не отключенные —
те, у которых рядом виден глаз на палитре слоев;
Merge Down — соединить активированный слой с предыдущим.
Для
создания
слоя,
дублирующего
исходное
изображение
Background, в меню Layer выбирается подменю Duplicate Layer. Физически
это означает, что изображение накладывается само на себя. При этом на
палитре слоев отобразится появление нового слоя Background Copy. Над
этим слоем можно произвести те же операции, что и над прозрачным
слоем.
Упражнение.
Откройте
файл
с
изображением;
создайте
слой,
дублирующий исходное изображение. Изменяя режимы наложения
верхнего слоя, сравните получаемые эффекты. Обесцветьте верхний слой и
постепенно уменьшайте его прозрачность и наполнение, одновременно
изменяя режимы наложения. Выберите оптимальный вариант сочетания
прозрачности, наполнения и режима наложения. Проделайте тот же
эксперимент с размытым верхним слоем и выберите оптимальный вариант
сочетания прозрачности, наполнения и режима наложения.
2.7. Выделение фрагментов
В программе предусмотрена работа не только с изображением в
целом, но и с его отдельными фрагментами. Для этого существуют
инструменты выделения, в результате действия которых выделенная
область имеет пунктирные границы и ее можно трансформировать,
корректировать, переносить на новый слой или в другое изображение, то
есть работать с ней как с отдельным изображением.
Выделение области всего изображения происходит посредством
подменю All меню Select.
73
Выделение пикселей одного цвета можно сделать с помощью
инструмента Magic Wand Tool (рис. 2.19). Выбор образца пикселя, по
цвету которого будут выбраны остальные пиксели, производится левой
кнопкой мышки.
Magic Wand Tool имеет следующие настройки.
Selection (выбор области) — обозначен квадратиками на панели,
выбирает стиль пересечения нескольких выделяемых областей.
Tolerance (допуск) — изменяет диапазон цветов, с которыми
работает инструмент Magic Wand Tool.
Anti-alias (сглаживание) — делает границы выделенной области
более гладкими, если поставить рядом с ним галочку.
Contiguous (параметр смежных пикселей) — задает выделение
пикселей из смежных с первым выбранным пикселем областей (если рядом
с ним поставить галочку) или выделение из несмежных с первым пикселем
областей (если галочку не ставить).
Sample All Layers — выбирает пиксель со всех видимых слоев (если
рядом с ним поставить галочку) или только с активного слоя (если галочку
не ставить).
Рис. 2.19. Местоположение и настройки инструмента Magic Wand Tool
74
Наиболее примитивная группа инструментов выделения — Marquee
Tool (рис. 2.20). Она предназначена для выделения прямоугольной
(Rectangular Marquee Tool) и овальной (Elliptical Marquee Tool) областей
изображения, а также для
выделения горизонтальной по ширине
изображения (Single Row Marquee Tool) и вертикальной по высоте
изображения (Single Column Marquee Tool) полос. Области задаются левой
кнопкой мышки.
Рис. 2.20. Местоположение и настройки группы инструментов Marquee Tool
Rectangular Marquee Tool и Elliptical Marquee Tool имеют следующие
настройки (рис. 2.20).
Selection (выбор области) — обозначен квадратиками на панели,
выбирает стиль пересечения нескольких выделяемых областей.
Feather (растушевывание) — задает область смягчения границы
выделяемой области в пикселях.
Anti-alias (сглаживание) — сглаживает границы овальной области.
Style (стиль) — дает возможность выделять область фиксированного
размера. По умолчанию в программе выставлен стиль Normal (обычный),
предназначенный для произвольного размера выделяемой области.
75
При нажатой клавише SHIFT инструменты Rectangular Marquee Tool
и Elliptical Marquee Tool выделяют соответственно квадратную и круглую
области.
Для выделения области более сложной формы используются
инструменты группы Lasso Tool (рис. 2.21):
Рис. 2.21. Местоположение и настройки параметра Lasso Tool
Lasso Tool — выделяет область произвольной формы. Настройки
параметра: Selection, Feather, Anti-alias по функциональному назначению
такие же, как и у инструментов Marquee Tool.
Polygonal Lasso Tool — выделяет полигональные области. Левой
кнопкой мышки указываются вершины полигона, которые автоматически
соединяются прямыми линиями. Настройки параметра: Selection, Feather,
Anti-alias по функциональному назначению такие же, как и у инструментов
Marquee Tool.
Magnetic Lasso Tool — выделяет полигональную область по
цветовым границам пикселей (им удобно выделять контуры объектов на
изображении). Настройки параметра: Selection, Feather, Anti-alias по
функциональному назначению такие же, как и у инструментов Marquee
76
Tool. Но в отличие от двух других инструментов группы Lasso Tool он
имеет еще несколько настроек:
Width (ширина) — задает размер области, с которой работает
инструмент при размещении точек границы выделения;
Edge Contrast (контраст границ) — задает степень контрастности,
необходимой для распознавания границы фигуры.;
Frequency (частота) — задает частоту промежуточных точек при
создании выделенной области.
Это далеко не все инструменты выделения, а только основные из
них, без освоения которых невозможно компоновать изображения и делать
фотомонтаж. Как было сказано выше, выделенная область обводится
пунктиром — в таком виде с ней можно работать. Клик правой кнопкой
мышки по области открывает меню с выбором возможных операций над
областью, из которых наиболее важными являются:
Deselect — отменяет выделение;
Select Inverse — вычитанием из основного изображения выделенной
области выделяет оставшуюся;
Feather — задает область смягчения выделенной области в пикселях;
Layer Via Copy — переносит содержимое выделенной области на
новый слой, не корректируя слой, в котором область была выделена;
Layer Via Cut — переносит содержимое выделенной области на
новый слой, вырезая ее из слоя, в котором область была выделена;
Free Transform — трансформирует содержимое выделенной области.
Левой кнопкой мышки можно передвинуть содержимое выделенной
области,
растянуть
его
или
сжать
(выбор
вида
дополнительной
трансформации —поворот, масштабирование, искажение и т. д. —
осуществляется кликом правой кнопки мышки по выделенной области);
Transform Selection — трансформирует контур выделения области.
77
Для
переноса
содержимого
выделенной
области
на
другое
изображение необходимо сохранить его с помощью команды Copy в меню
Edit (Edit находится рядом с меню File). Для загрузки содержимого
выделенной области в другое изображение последнее нужно открыть и
использовать команду Paste в меню Edit. При этом содержимое
выделенной области скопируется в новый слой.
Упражнение. Откройте файлы с двумя изображениями для
фотомонтажа. Перенесите область из одного изображения на другое.
Осуществите
цветокоррекцию
перенесенной
области
под
цвет
изображения, на которое она перенесена. Лишние элементы перенесенной
области сотрите ластиком (Eraser Tool на панели инструментов под
инструментом Stamp Tool). Должно получиться гармонично совмещенное
изображение.
2.8. Создание текста в изображении
Для
создания
текста
в
программе
Photoshop
предусмотрен
специальный инструмент Type Tool (текст) (рис. 2.22), он имеет
следующие параметры.
Направление — Horizontal Type Tool (текст по горизонтали) или
Vertical Type Tool (текст по вертикали).
Гарнитура
—
перечень
шрифтов
высвечивается
согласно
имеющимся в папке Fonts системы Windows (добавлять новые шрифты
нужно в эту папку, а не через программу Photoshop).
Начертание — Regular (простой), Italic (курсив), Bold (жирный), Bold
Italic (жирный курсив).
Размер — можно выбрать стандартные от 6 до 72 pt или поставить
свой размер.
78
Метод сглаживания границы букв — None (обычный), Sharp
(резкий), Crisp (жесткий), Strong (сильный), Smooth (гладкий).
Способ выравнивания текста — по левому краю, по правому краю
или по центру.
Цвет текста — выбирается через палитру цветов.
Печать текста автоматически происходит в новом слое. Чтобы
напечатанный текст трансформировать или перенести в другое место, его
необходимо выделить с помощью Marquee Tool.
Рис. 2.22. Местоположение и настройка инструмента Type Tool
С помощью Type Tool можно создавать подписи изображений,
тексты для баннеров и т д. Однако важно помнить, что слой с текстом в
конечном итоге необходимо соединить с основным слоем, а значит,
превратить в изображение. Написанный таким образом текст станет
картинкой.
Текст может быть нанесен также вручную инструментами для
рисования Brush Tool (кисточка) и Pencil Tool (карандаш) (рис. 2.23). Оба
79
инструмента имеют настройки диаметра кисти (толщины карандаша),
режима
наложения,
управляются
левой
прозрачности
кнопкой
и
мышки,
наполнения.
что
Инструменты
создает
впечатление
произвольного почерка.
Рис. 2.23. Местоположение и настройки инструмента Brush Tool
Упражнение. Откройте файл с фотографией, на которой фотокамерой
автоматически проставлена дата ее создания. Сотрите дату с помощью
инструментов ретуши. Напишите другую дату с помощью инструмента
Type Tool. Сделайте подпись к фотографии с помощью инструмента Brush
Tool.
2.9. Анимация
Кроме статических изображений на сайте помещаются динамические
изображения. Небольшое по размерам изображение (большое имеет
длительную загрузку на сайтах) заключает в себе несколько кадров,
которые
меняются
между
собой,
создавая
эффект
анимации.
Анимированные изображения компонуются не в программе Photoshop, а в
его приложении ImageReady (рис. 2.24).
80
Рис. 2.24. Место перехода из программы Photoshop в приложение ImageReady
Но подготовка таких изображений происходит в программе
Photoshop;
для
этого
используются
слои,
которые
впоследствии
компонуются в кадры. ImageReady по интерфейсу похож на Photoshop, и
палитра слоев переходит в приложение в таком же виде, в каком была
представлена
изначально.
Для
компоновки
кадров
в
ImageReady
необходимо вызвать окно с их структурой (рис. 2.25): меню Window,
подменю Workspace, подменю Interactivity Palette Location. В окне с
кадровой структурой можно создать новый кадр или удалить его, кликнув
левой кнопкой мышки соответственно на квадратик или ведерко на
нижней панели; задать время прокрутки каждого кадра в секундах; задать
прокрутку всех кадров или остановить ее, кликнув левой кнопкой мышки
на стрелки нижней панели.
Рис. 2.25. Окно с кадрами в ImageReady
81
Для того, чтобы задать структуру кадра, нужно его активировать
(выделить, кликнув по нему мышкой) и выбрать на палитре слоев те слои,
которые должны в него войти. После того, как задана структура каждого
кадра и общая структура анимации будет удовлетворять задуманному,
файл сохраняется. Для публикации на сайте анимированный файл
необходимо сохранить в формате .gif. Чаще всего с помощью этой
технологии
изготавливаются баннеры
для
сайтов
(изображение с
рекламой).
Упражнение. Откройте новый файл в программе Photoshop.
Напишите название выбранного сайта в одном слое и небольшое описание
сайта в другом слое. Можно вставить еще одним слоем картинку с
логотипом сайта. Переключитесь в приложение ImageReady. Создайте два
кадра (три, если имеется слой с логотипом). Включите в первый кадр слой
с названием сайта, во второй — слой с описанием (в третий — слой с
логотипом). Задайте время прокрутки каждого кадра. Посмотрите, как
будет выглядеть анимированное изображение. Сохраните файл в формате
.gif.
2.10. Общие рекомендации
Освоение программы Photoshop — длительный и трудный процесс.
Существует множество методик по освоению этой программы: от
самоучителей до специальных обучающих курсов. Но все они основаны
на практическом освоении программы теоретическое описание может
служить лишь небольшим подспорьем.
В данном пособии раскрыты только основные, необходимые в работе
контент-менеджера, но далеко не все возможности программы. Однако и
их освоение займет немало времени. Но приведенные базисные операции
82
уже позволят создать качественные изображения с художественными
эффектами (на рис. 2.26 приведено изображение, корректировка которого
проводилась исключительно данными в пособии способами).
Рис. 2.26. Изображение после корректировки данными в пособии способами
По мере получения навыков работы с перечисленными в пособии
опциями постепенно придет и понимание общей структуры программы,
которое позволит при необходимости самостоятельно освоить Photoshop
на более профессиональном уровне (для профессионального рисования,
дизайна и т. д.). Более того, полученные знания — это стартовый уровень
для освоения других графических программ.
В
дополнение
к
данному
пособию
можно
использовать
многочисленные материалы, выложенные в Интернете и предлагающие
конкретные алгоритмы, комбинирующие различные, в том числе и не
описанные здесь функции программы Photoshop для достижения сложных
83
художественных эффектов. Для дополнительного освоения программы
рекомендуются следующие сайты:
Анатомия Adobe Photoshop http://www.psd.ru/
Photoshop Tutorials http://www.demiart.ru/tutorials/index.shtml
Photoshop Laboratory http://www.photoshop.kulichki.net/index.htm
Уроки Photoshop любой сложности http://www.photoshopschool.ru/
Adobe Photoshop Tutorials http://www.tutorialized.com/tutorials/Photoshop/
Photoshop — программа, постоянно модернизируемая, поэтому для
того, чтобы узнавать о новых версиях программы, а также о ее новых
модулях, полезно периодически просматривать раздел сайта Adobe
Systems Inc., посвященный программе Photoshop:
http://www.adobe.com/products/photoshop/index.html
84
Вопросы для самоподготовки
1. Что такое контент-менеджмент?
2. Почему для работы контент-менеджера важны знания языка HTML и
графической программы Adobe Photoshop?
3. Чем отличается контент-менеджмент сайтов со статическим и
динамическим контентом?
4. В каких программах можно создавать HTML-документы?
5. Какие требования нужно учитывать при создании HTML-документа?
6. Какова структура HTML-документа?
7. Какими способами можно улучшить визуальное восприятие текста?
8. Какие тэги отвечают за изменение параметров текста?
9. Каково значение цвета в восприятии информации? Какими тэгами
моно изменить цвет текста и фона HTML-документа. Как определить
код цвета?
10.Почему
при
создании
HTML-документа
большое
внимание
уделяется таблицам, какими тэгами они формируются?
11. Что такое фреймы? В чем их преимущества и недостатки в
формировании HTML-документа?
12.Какие требования предъявляются к графическим изображениям,
помещаемым на сайтах? Какие параметры изображения
можно
изменять с помощью языка HTML?
13.В чем разница между изображениями, чьи размеры изменены с
помощью языка HTML и с помощью программы Adobe Photoshop?
14.Что такое гиперссылка? В каких случаях уместно ее использование?
Какие тэги задают гиперссылку?
15.Что такое метатэги? Насколько важно их использование?
85
16.В чем разница между векторной и растровой графикой? Для
создания какой из этих график используется программа Adobe
Photoshop?
17.Какими физическими характеристиками обладает электронное
изображение? С помощью каких опций программы Adobe Photoshop
эти характеристики можно изменять?
18.Какие форматы файлов используется в программе Adobe Photoshop?
Какие из этих форматов применимы для электронных изображений,
а какие для изображений, предназначенных для печати?
19.Чем отличаются форматы .GIF и .JPEG?
20.Для
чего
нужна
ретушь
изображения?
Какие
инструменты
программы Adobe Photoshop используются для ретуши?
21.Для
чего
используется
фотомонтаж?
Каковы
негативные
и
позитивные последствия его использования?
22.Что такое слой? Для чего и как используются слои в программе
Adobe Photoshop? Какие операции можно производить над слоями?
23.Какими
способами
можно
выделять
отдельные
фрагменты
изображения в программе Adobe Photoshop? Какие операции можно
производить с выделенными фрагментами?
24.С
помощью
каких
инструментов
можно
нанести
текст
на
изображение и какие параметры изменения нанесенного текста
предусмотрены в программе Adobe Photoshop?
25.Что такое динамическое изображение? Для чего могут быть
использованы динамические изображения, созданные с помощью
программы Adobe Photoshop и его приложения Adobe ImageReady?
26.Как происходит подготовка и формирование кадровой структуры
динамического изображения?
86
27.Какие
форматы
файлов
с
динамическими
изображениями
поддерживает приложение Adobe ImageReady?
Рекомендуемая для самостоятельного изучения
литература
1. Кириленко А. Самоучитель HTML. - СПб.: Питер; Киев:
Издательская группа BHV, 2005. - 272 с.
2. Полонская Е. Л. Язык HTML Самоучитель. - М.: Вильямс, 2004. 320 c. (Сер. «Самоучитель»)
3. Харрисон Д. Adobe Photoshop CS без секретов. - М.: Новый
издательский дом, 2004. - 304 с.
4. Лендер С.,Нечаев И. Adobe Photoshop CS2 с нуля до
сертифицированного специалиста Учебное пособие. - М.:
Технический бестселлер, 2006. - 336 с. (Сер. «Технический
бестселлер»)
5. Орлов Л.В. Web-сайт без секретов. - 2-е изд., доп. и испр. - М.:
Новый издательский дом,2004. - 165 с.
Справочные сайты:
1. Советы по HTML: http://lepers.chat.ru/world.htm
2. Учебник по HTML: http://www.netservice.ru/html/
3. Работа с Adobe Photoshop: http://webschool.narod.ru/prof/photoshop/
87
Содержание
О профессии контент-менеджера ........................................................................................ 3
1. Язык HTML ......................................................................................................................... 6
1.1. Структура HTML-документа ....................................................................................... 8
1.2. Форматирование шрифта в HTML-документе ........................................................... 9
1.3. Форматирование текста в HTML-документе............................................................ 14
1.4. Изменение цвета в HTML-документе ....................................................................... 21
1.5. Таблицы в HTML-документе ..................................................................................... 28
1.6. Форматирование графических изображений в HTML-документе ......................... 32
1.7. Гиперссылки в HTML-документе .............................................................................. 36
1.8. Метатэги ....................................................................................................................... 40
1.9. Фрэймы......................................................................................................................... 43
1.10. Комментарии ............................................................................................................. 47
1.11. Общие рекомендации................................................................................................ 48
2. Редактирование изображений с помощью программы «Photoshop» ..................... 49
2.1. Начало работы и формат файлов ............................................................................... 50
2.2. Изменение размера изображения .............................................................................. 54
2.3. Увеличение резкости и размытие изображения ....................................................... 57
2.4. Цветокоррекция ........................................................................................................... 61
2.5. Ретушь мелких дефектов ............................................................................................ 68
2.6. Слои .............................................................................................................................. 71
2.7. Выделение фрагментов ............................................................................................... 73
2.8. Создание текста в изображении................................................................................. 78
2.9. Анимация ..................................................................................................................... 80
2.10. Общие рекомендации................................................................................................ 82
Вопросы для самоподготовки ............................................................................................ 85
Рекомендуемая для самостоятельного изучения литература ..................................... 87
88
Виктория Леонидовна Силаева
Контент-менеджмент
Учебное пособие
Подписано в печать
Уч.-изд. л. 4,3
Усл. печ. л. 5,3
Заказ №
Тираж 200 экз.
10.10.06
Формат 60х90/16
125829, Москва, Ленинградский пр-т, 64. — МАДИ (ГТУ), к. 305 к.
Кафедра социологии и управления, тел. 155-01-44