КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Что такое HTTP 8 страница
|
|
|
|
Чтобы управлять отображением внутренних линий таблицы, необходимо изменять значения атрибута rules. Возможные значения таковы:
- none. Линии отсутствуют.
- groups. Линии только между группами строк, определяемыми элементами <thead>, <tfoot> и <tbody> или между группами столбцов, определяемых элементами
<colgroup> и <col>. - rows. Линии только между строками.
- cols. Линии только между столбцами.
- аll. Все линии.
Хотя эти атрибуты и входят в спецификацию XHTML Strict, помните, что все то же самое можно делать при помощи таблиц стилей, как описано в главе 10. Это даже предпочтительнее, особенно если вы ориентируетесь на последние графические браузеры (неграфические браузеры будут игнорировать все эти атрибуты).
Примеры оформления страниц на основе таблиц
Теперь вы уже многое знаете о том, как создавать простейшие таблицы, знаете множество различных элементов, используемых для этого, и их атрибутов. Пришло время перейти к рассмотрению более сложных примеров. Элементы таблиц XHTML используются довольно широко. Практически всегда, когда вы пожелаете получить контроль над расположением абзацев, изображений и других элементов, включаемых в таблицы, таблица будет самым правильным выбором. Мы рассмотрим два примера: в одном внимание заостряется на разделении страницы на две части по горизонтали, в другом — на создании столбцов и работе с ними.
Таблица, ориентированная на работу со строками
Это довольно-таки несложная таблица, — по крайней мере, она выглядит так. Формально она предназначена все для той же фиктивной риэлтерской фирмы. В процессе ее рассмотрения вы увидите, что она ориентирована на работу со строками. То есть вы увидите набор строк, и каждая из них представляет собой, на самом деле, всего один столбец данных. Если вам потребуется несколько столбцов, создайте вложенную таблицу. В ней может быть столько столбцов, сколько нужно. Это хороший подход к созданию четких и понятных веб-страниц. (Кроме того, не запутаетесь в собственных кодах.)
|
|
|
Обратите внимание еще и на то, что размер границы главной таблицы установлен нулевой, тем самым создается пустое пространство вокруг большинства элементов. Применяется описанная ранее группировка строк, что позволяет браузеру отображать заголовок, основание таблицы и ее тело независимо друг от друга. Это дает возможность сделать среднюю часть таблицы, в отличие ото всех остальных, прокручиваемой, а при печати на каждой странице автоматически выводить колонтитулы. Весь документ, соответствующий стандарту XHTML Strict, включая соответствующие объявления (подробную информацию о них можно найти в конце главы 4), приведен в листинге 9.3.
Листинг 9.3. Страница, построенная на основе таблицы с ориентацией на горизонтальную разбивку
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE HTML PUBLIC "\//W#C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml ">
<head>
<titlе>Внутри дома</titlе>
</head>
<body bgcolor="#ffffff">
<!-- Начало таблицы на всю страницу -->
<table border="0" width="100% cellpadding="10">
<thead>
<!-- Верхний баннер --> <tr>
<td align="center"><img src="images/heading.jpg" />
</td>
</tr>
<!-- Строка ссылочного меню --> <tr>
<td align="center">
<a href="index.html">Главная страница</а>
<a href="house.html">Дом</a> | <a href="area.html">Участок</a>
<a href="terms.html">Условия продажи</а>
<a href="map.html">Haпpaвлeния</a> </td> </tr>
</thead>
<tbody>
<!-- Маленькие фотографии во вложенной таблице -->
<tr>
<td align="center">
<table width="450" border="1" cellspacing="2" cellpadding="5">
<tr>
<td width="33%"><img src="images/master.jpg" />
|
|
|
</td>
<td width="33%"><img src="images/kids_bedroom.jpg />
</td>
<td width="34%><img src="images/living_bedroom.jpg />
</td>
</tr>
<tr>
<td width="33% valign=tор">Вид из окна</td>
<td width="33% valign=tор">На крыше</td>
<td width="34%' valign="top">Пляж</td>
</tr>
</table>
</td> </tr>
<!-- Основная часть текста и плавающая часть таблицы -->
<tr> <td>
<h1>Ваша собственная недвижимость</h1>
<table align="right" cellpadding="5" width="200"
border="1">
<tr bgсоlог="уеllow"><td>Ленинская тропа. 19 E</td></tr>
<tr><td><b>ценa:</b> $279 000</td></tr>
<tr><td><b>Оценкa:</b>$309 000</td></tr>
<tг><td>Bлaдeлeц переезжает и заинтересован в
срочной продаже. Звоните 654 3456. спросить Андрея</td></tr>
</table>
<р>Вы больше нигде не встретите таких предложений за
такую скромную сумму! Пройдя через ворота (с забавным
дистанционным управлением), попадаете в прекрасный домик.
Внутри вы увидите, формально говоря, спальню и гостиную,
на первом этаже - игровую комнату (идеально подходит для создания
домашнего (кино)театра). В подвал ведет витая лесенка,
спустившись по которой вы попадаете в собственную мини-прачечную.
Адрес: Ленинская тропа. 19Е. Цена: $279 000.</р>
</td> </tr> </tbody>
<!-- Последняя строка, информация -->
<tr>
<td align="center"> •
<аddrеss>Подробности по телефону (945) 654 3456 или по e-mail:
<а href="mailto:[email protected]">(Продавец Рома)</а,
в поле "Тема" укажите: "Мини-недвижимость".
Спасибо!</address>
</td>
</tr>
</body>
</html>
Результат показан на рис. 9.11.
Рис. 9.11. Страница, соответствующая листингу 9.3. Обратите внимание на вложенные таблицы
Сконцентрируемся на столбцах
Вы убедились, что горизонтальное разделение таблицы — это великолепно, но, увы, такой подход немного проигрывает в том случае, когда нужно разместить на странице большое количество информации. Вертикальное разделение и вообще тщательная работа со столбцами ведется при создании информационных сайтов, которые но внешнему виду должны напоминать газеты или журналы. Частично из соображений экономии места на экране этот же подход используется на больших порталах, таких как Excite (http://www.excite.com/) и Yahoo! (http:// www.yahoo.com), а также на сайтах таких изданий, как New York Times (http:// nytimes.com/).
|
|
|
Если вы решите попробовать применить «вертикальный» подход, вы обнаружите, что это несложно. Единственное, к чему придется привыкнуть, — это к большим объемам данных в каждой ячейке. Может быть, трудно будет разбираться в исход ном коде, поскольку в веб-браузере столбцы отображаются не совсем в том поряд ке, в котором описываются на HTML.
Однако эта проблема решается применением развернутых комментариев. Помните, что вы пишете их исключительно для себя, поэтому комментарии должны быть понятны прежде всего вам самим. Конечно, это справедливо только в том случае, когда речь не идет о больших корпоративных сайтах, разрабатываемых группой j программистов и дизайнеров. В листинге 9.4 приведен пример страницы, построенной на основе таблицы с вертикальной ориентацией. На рисунке 9.12 показан результат.
Рис. 9.12. Отображение в браузере кода, представленного в листинге 9.4
ПРИМЕЧАНИЕ
По своему опыту знаю, что браузеры ведут себя по-разному при попытке заставить их распознавать атрибут align. Может вдруг оказаться, что разные колонки выглядят в разных браузерах по-разному. Также важно помнить, что <colgroup> и <col> — это относительно новые элементы, и не все браузеры смогут их отобразить корректно. Единственным выходом из этой ситуации мне представляется использование <td width="xx"> в ячейках таблицы. Поскольку колонка должна быть не уже самой широкой ячейки, то можно обойтись заданием размеров первых ячеек каждого столбца. Именно это и реализовано в листинге 9.4. Я решил не полагаться на <colgroup> и <col>.
Листинг 9.4. Страница, разделенная на колонки
<?xml version="1.0" encoding="iso-8859-l"?>
<!DOCTYPE HTML PUBLIC "\//W#C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http: //www.w3.org/1999/xhtml">
<head>
<title>Новости рынка недвижимости!</title>
</head>
<body>
<!-- Начало таблицы на всю страницу -->
<table border="0"
<table border="0"width=100%" cellpadding="5"
cellspacing="0" bgcolor="#eeeeee"
<!-- Верхние строки -->
<thead>
<tr>
<td align="center" со1зрап="3">Последнее обновление:
|
|
|
10/14/02 2:15 PM EDT</td>
</tr>
<tr>
<td align="center" colspan="3"><img src="title.png"
аlt="Новости рынка недвижимости" /></td>
</tr>
<tr>
<td align="center" bgcolor="#eeeeee" colspan="3">
<a hгef="http.//www.fakeestate.com/">Глaвнaя</a>
<a href="reports/mortgage.html >Информация по закладным</а>
<a href="column/index.html">Нaнси</а>
<a href="recent.html">Архив новостей</а>
<a href="http://ww.fakeestate.com/cgi-bin/forums">(t>Форумы</a
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
</thead>
<!-- Конец заголовка таблицы -->
<!-- Основная часть таблицы -->
<tbody>
<tr>
<!-- Начало левой колонки -->
<td valign="top" bgcolor="#eeeeee" width="150">
<b>Новинка - обновления на форуме!</b><br />
<р> Посетите <а href=
"http://www.fakeestate.com/cgi-bin/forums">Форум</a>
"Новостей рынка недвижимости". На нем можно обсудить
произошедшие за последнее время изменения, задать вопросы
напрямую ведущим экспертам и поговорить обо всем,
что касается рынка недвижимости!</р>
<b>Горячие ссылки</b><br />...
<р>3агляните и на другие интересные сайты, посвященные
недвижимости:</р>
<а target="_blank" href="http://www.realworldestate.cofn/">
Мир Недвижимости</а>
<р>
<а target="_blank" href="http://www. mortgage-planet. соm/">
Планета Ипотека</а>
<а target="_blank" href="http://www.realfakedeal.соm/">
Деловое обозрение</а> </р>
<р>
<а target="_blank" href="http://www. fixituppers.com/">
FixItUppers.com </а>
</р>
</td>
<!-- Конец левой колонки -->
<!-- Начало средней колонки -->
<td valign="top" bgcolor="#ffffff">
<h1>Цены все падали...</h1>
<р>С наступлением холодов в наших северных краях деловая
активность фирм-застройщиков резко снизилась.
В затишье ушли также риэлтеры. В связи с этим наметилось
общее сезонное падение цен на недвижимость. Эксперты прогнозируют
сохранение наметившейся тенденции до начала весны. Нынешний
"мертвый сезон" -
идеальное время для тех. кто бережет деньги и желает приобрести
жилье по минимальной цене.</р>
<р><а href="news/10.14.closing.html">Подробнее...</а></р>
<h1>...A инвестиции в страхование все возрастали</h1>
<р>С принятием Государственной Думой закона об обязательном
страховании гражданской ответственности господа инвесторы
крепко задумались о смене направления своей деятельности.
Опытные эксперты отмечают некоторый сдвиг инвестиционных потоков
в сторону страховых проектoв.</р>
<р><а href="http://www.stategov.gov/page/news.news.html >
Подробности...</a></p>
<h1>Нанси: делаем заказы</h1>
<p> В этом номере освещается текущее положение дел риэлтерской
компании Нанси. Приведены таблицы роста различных экономических
показателей за последний месяц.</р> <р><а href=
"columns/10.14.nancy.html ">Читайте колонку Нанси...</а>
<!-- Конец средней колонки --> </td>
<!-- Начало правой колонки -->
<td width="150" valign="top" bgcolor="#eeeeee">
<p><img src="images/feature.jpg" width="100" аlt=
"Лучший дом недели" /></р>
<р><b>Лучшая собственность</b><br />
Лучшим выбором этой недели признано предложение 4/2/2.
Законченность дизайна, как интерьерного и экстерьерного,
так и ландшафтного. Участок площадью 1.2 га. бассейн,
питающийся из небольшой чистой реки. Если вы когда-нибудь
мечтали о счастье, то сейчас оно стало осуществимым.</р>
<р><а href="features/10.14.property.html">[4/2/2 Речном]</а></р>
<!-- Конец правой колонки -->
</tbody>
</td>
</tr>
</table>
</body>
</html >
Резюме
В этой главе вы узнали много нового про таблицы. Если до этого вы, возможно, считали, что это лишь средство организации данных, то по прочтении этой главы становится понятно, что это — мощный инструмент разработки дизайна полноценных веб-страниц. Он включает в себя такие приемы, как группировка строк и столбцов, объединение ячеек, вложение таблиц. Вы увидели два достаточно больших примера веб-страниц, созданных на основе таблиц. Один из них обращает ваше внимание на разделение таблицы, а значит, и всей страницы по горизонтали, другой — на разделение по вертикали.
В следующей, очень важной, главе мы обсудим таблицы стилей, современный подход к вопросу варьирования внешнего вида веб-страниц.
Глава 11. Дополнительные свойства изображений и карты ссылок
- Сделайте изображение еще лучше
- Оптимизация веб-изображений
- Сжатие и последовательное кодирование
- Прозрачность изображений
- Анимированные изображения
- Jasc Animation Shop
- VSE Animation Maker
- Карты ссылок
- Создание карт ссылок, обрабатываемых клиентом
- Атрибут usemap элемента <img/>
- Элементы <map> и <area/>
- Работа с картами ссылок, обрабатываемыми сервером
- Резюме
В главе 6 мы затронули только основные вопросы создания веб-изображений и размещения их на странице, однако это далеко не все, что касается данной темы. Создание и редактирование изображений — это целая наука, или искусство. Веб-изображения должны привлекательно выглядеть, но вместе с тем занимать как можно меньше места и передаваться по Сети с максимальной скоростью. Разумеется, изображения можно не только сканировать или рисовать и затем размещать на вебстраницах. В некоторых случаях их можно анимировать, а с использованием соответствующих элементов XHTML можно делать из них карты ссылок (каждая часть изображения является гиперссылкой).
В этой главе мы обсудим следующие вопросы:
- как сделать изображения лучше и меньше;
- создание и использование анимированиых последовательностей изображений;
- создание карт ссылок для навигации по сайту.
Сделайте изображения еще лучше
Из главы 6 вы узнали о том, как выбирать формат файлов изображений, как сохранять и преобразовывать их, изменять размер и вырезать нужные части. Последние два действия служат для уменьшения размеров файлов. В этом параграфе мы вновь обратимся к уже известным по главе 6 приложениям: Paint Shop Pro для Windows и GraphicConverter для Macintosh.
Мы коснемся вопросов оптимизации изображений с помощью изменения их свойств в графических приложениях. Вы убедитесь в том, что при их редактировании и сохранении имеется огромное количество возможностей для этого.
Оптимизация веб-изображений
Какие еще существуют способы уменьшения размера графического файла, кроме кадрирования изображения и изменения его размера? При работе с графическим файлом необходимо разумно использовать цвета изображения и его разрешение. Очень важна грань между допустимым качеством и этими параметрами, здесь нужно руководствоваться прежде всего тем, для чего и для кого вы оптимизируете их.
Насыщенность цвета
Использование небольшого количества цветов характерно для форматов PNG и GIF. Изображения в формате JPEG обычно представляют собой фотографии, а, значит, тут уже не обойдешься 256 цветами. Нужны миллионы оттенков. То есть вы, конечно, можете преобразовать JPEG в 256-цветный формат, но каков результат... Под цветами в данном случае подразумевается палитра оттенков, доступная в том или ином режиме. Чем меньше цветов, тем меньше размер файла, поскольку похожие оттенки цвета заменяются одинаковыми цветами. Размер палитры связан с глубиной цвета.
В Paint Shop Pro можно изменять глубину цвета следующим образом. Откройте изображение, из меню Colors выберите команду Decrease Color Depth. Появится диалоговое окно, в котором будет представлено несколько различных способов уменьшения глубины (рис. 11.1).
Рис. 11.1. Диалоговое окно уменьшения глубины цвета
Здесь можно выбрать стандартную, или веб-палитру (поскольку конечное предназначение ваших изображений — это все-таки Сеть). Последняя распознается браузерами наиболее корректно и не зависит от платформы.
Затем нужно выбрать метод уменьшения (совмещения) цветов. Здесь следует поэкспериментировать. Метод Nearest color (Ближайший цвет) говорит сам за себя. Во время преобразования значения цветов приводятся к ближайшему, известному в сокращенной палитре. В диалоговом окне можно выбрать и два дополнительных метода — диффузия и сглаживание, при этом изменяются растровые структуры для получения плавных цветовых переходов.
СОВЕТ
После изменения палитры можно отменить это действие. Для этого следует выбрать из меню Edit пункт Undo Decrease Colors. Изображение вернется в исходное состояние. После этого можно продолжить свои эксперименты, изменяя другие параметры.
В программе GraphicConverter нужно выбрать из меню Picture пункт Colors. В появившемся меню следует выбрать Change To, изменив по своему усмотрению параметры. Чтобы получить минимальную допустимую глубину цвета, следует выбрать Minimize Color Table.
Помните, что, если вы имеете дело с цветными фотографиями, сокращение цветовой палитры вряд ли приведет к хорошему результату, частично из-за того, что JPG работает с миллионами цветов, а частично из-за того, что фотографии при любых изменениях глубины цвета становятся только хуже. Зато если у вас имеется GIF или PNG, можно забавляться сокращением палитры сколько угодно. Собственно говоря, можно при их создании сразу указать небольшую палитру (256 цветов или даже 216, если речь идет о веб-формате). Как в Paint Shop Pro, так и в GraphicConverter можно выбрать глубину цвета в диалоговом окне New.
Разрешение
Вы, вероятно, нечасто изменяете насыщенность цвета отсканированного (или снятого цифровой камерой) изображения, но зато вполне обычной процедурой является варьирование разрешения. Дело в том, что в большинстве случаев разрешение довольно значительно превышает необходимое значение. Чаще всего для публикации в Сети достаточно разрешения 72 точки на дюйм (dpi, иногда эту единицу измерения называют «пикселы на дюйм» (ppi)) вместо 200 и более, предлагаемых по умолчанию при сканировании для последующей печати.
Чтобы изменить разрешение в Paint Shop Pro, нужно выбрать Image > Resize. Установите флажок Actual/Print Size и поставьте значение разрешения 72 ppi. Нажмите ОК. Ну вот, теперь можно заняться знакомой уже процедурой изменения размера изображения, поскольку при варьировании разрешения реальные размеры картинки также изменились. Чтобы изменить геометрический размер, снова выберите Image > Resize. После этого установите флажок Pixel Size. В поле ввода необходимо ввести размеры (высоту и ширину) в пикселах. Если включена функция сохранения пропорций (Maintain Aspect Ratio), а она должна быть включена, то при изменении одного из размеров второй изменится автоматически. Нажмите ОК, теперь у картинки должен быть «правильный» размер и «правильное» разрешение.
В GraphicConverter для выполнения тех же действий следует выбрать Picture > Resolution. В появившемся диалоговом окне в каждом из полей нужно ввести 72, функцию Convert оставить включенной и нажать ОК. Изображение преобразовано. Установлено новое разрешение.
Сжатие и последовательное кодирование
Даже если вы уже сохраняете изображение, это не означает, что вы закончили работу с ним, особенно если дело касается формата JPG или (в меньшей степени) PNG. Дело все в том, что даже в диалоговом окне сохранения документа есть что выбрать.
Сжатие
При сохранении формата JPEG программа спрашивает у пользователя, какое качество он хочет задать. Чем ниже качество, тем сильнее сжимается изображение. Это стандартный компромисс, который всегда приходится искать при работе с данными, однако его нужно принимать в расчет, особенно если вы кадрировали, изменили размер, палитру и разрешение изображения, а оно по-прежнему «весит» слишком много.
В Paint Shop Pro во время сохранения файла можно выбирать степень сжатия. Выберите из меню File пункт Save As. Если изображение еще не находится в JPEG-формате, укажите в поле Туре тип JPEG-JFIF Compliant. Теперь щелкните на кнопке Options. В появившемся диалоговом меню вы увидите бегунок Compression Factor, позволяющий настраивать степень сжатия. Чем больше вы его сдвинете вправо, тем сильнее будет сжатие и ниже качество. И наоборот. Примите нужное вам решение и нажмите ОК.
СОВЕТ
В Paint Shop Pro существует ясная и четкая функция под названием Optimizer. Никто не запрещает ею пользоваться. Она помогает найти нужное соотношение размер/качество, когда размер уже приемлемо мал, а качество все еще приемлемо велико. В диалоговом окне Options щелкните на Run Optimizer, после чего запустится процесс оптимизации, который, кстати, вы в какой-то степени можете контролировать.
В GraphicConverter вы тоже можете выбирать параметры сжатия при сохранении аила. Выберите из меню File пункт Save As. Если изображение еще не находится в JPEG-формате, укажите в поле Format тип JPEG-JFIF Compliant. Теперь щелкните на кнопке Options. В появившемся диалоговом меню вы увидите бегунок, позволяющий настраивать качество и сжатие. Обратите внимание на флажок Calculate File е, при установке которого можно узнать примерный размер выходного файла. 1римите нужное вам решение и щелкните на ОК (рис. 11.2).
Сохранение последовательных изображений
Среди параметров сохранения файлов в форматах JPEG, GIF или PNG вы, скорее всего, найдете переключатель, позволяющий задать последовательный (чересстрочный) режим отображения. Что это значит? Все очень просто: изображение может выводиться на экран браузера либо по мере скачивания, либо только тогда, когда оно уже полностью загружено на пользовательский компьютер. Это создает видимость более скоростной работы сайта, да это действительно так и есть, поскольку изображение начинает появляться на экране практически сразу. Возможность изменения режима имеют и Paint Shop Pro, и GraphicConverter. Переключатель находится в том же диалоговом окне, в котором задается степень сжатия (диалоговое окно GraphicConverter показано на рис. 11.2).
Рис. 11.2. Диалоговое окно GraphicConverter
Графические файлы в форматах GIF и PNG также могут быть последовательными (этот параметр для GIF обычно называется «чересстрочный вывод»). Так что при сохранении внимательно просмотрите доступные диалоговые окна.
Прозрачность изображений
Прозрачность изображения никак не влияет на размер графического файла и на скорость скачивания, но для вас она может быть интересна. Данный параметр поддерживается форматами GIF и PNG, он позволяет выбрать один какой-нибудь цвет и сделать его прозрачным для любых фоновых изображений и цветов.
Эта возможность особенно актуальна для «плавающих» изображений. Или, на-1 пример, правильно подобрав качество и сделав тени, можно добиться эффекта размещения изображения непосредственно в окне браузера (рис. 11.3).
Цвет, который вы выбираете для придания картинке прозрачности, не обязатель-1 но должен быть цветом фона. Можно сделать прозрачными и какие-то другие части изображения, если есть на то причины. Тем не менее нужно помнить, что про зрачным может быть только один цвет, об этом следует подумать заранее при создании изображения. Если, например, фон имеет два цвета, вам не удастся сделать его прозрачным.
Рис. 11.3. Задний фон изображения сделан прозрачным, поэтому кажется, что картинка расположена прямо на странице
В Paint Shop Pro прозрачность устанавливается с помощью Colors > Set Palette Transparency. При этом программа может указать вам на то, что изображение должно быть преобразовано перед этим действием. Ну что ж, возможно, действительно нужно его куда-нибудь конвертировать, особенно если речь идет о фотографии с огромным количеством цветов.
После приведения изображения к нужному формату вы увидите диалоговое окно установок прозрачности Set Palette Transparency.
Здесь можно убрать прозрачность, если она была, сделать прозрачным текущий цвет фона (что довольно часто и делается) или выбрать какой-то другой цвет, при этом не нужно вручную вводить шестнадцатеричные значения или названия цветов, можно с помощью мыши щелкнуть на участке палитры нужного оттенка. Впрочем, его номер сразу же появляется в специальном поле диалогового окна, а если вы и раньше точно знали его, можно было ввести его в этом поле вручную. После завершения процесса настройки щелкните на ОК.
В самом Paint Shop Pro прозрачная часть изображения будет показана светло-розовым цветом. Действительно прозрачной она будет только при просмотре в виде файла GIF или PNG в браузере.
В GraphicConverter прозрачность устанавливается еще проще. Для этого нужно щелкнуть на инструменте под названием «Прозрачность». Он выглядит, как «волшебная палочка» с буковкой «Т». Нужно установить указатель на тот цвет внутри изображения, который должен быть прозрачным и щелкнуть на нем с помощью мыши. Этот цвет немедленно превратится в серый (таким образом показывается, что он стал прозрачным). Можно поменять свой выбор, щелкнув на участке другого цвета, затем сохранить изображение в формате GIF или PNG.
Анимированные изображения
Формат GIF (в частности, GIF89a) имеет поддержку определенного вида анимации. Больше всего это напоминает те мультики, которые в детстве рисуются на углах страниц школьных тетрадей, затем быстро перелистываются. Действительно, если сделать серию картинок, затем их быстро менять, возникнет впечатление, что вы просматриваете мультфильм. В Интернете вы наверняка встречали нечто подобное, обычно такая анимация используется в рекламных баннерах.
Создание анимации не требует ничего, кроме определенного воображения и специального программного обеспечения, причем бывают как дорогостоящие крупные программы (например, от таких производителей, как Macromedia или Adobe), так и пробные бесплатные версии. Большинство версий Paint Shop Pro включают в себя Animation Shop, этого вполне достаточно для пользователей Microsoft Windows. Если у вас Macintosh, могу предложить познакомиться с бесплатной программой GifBuilder (http://homepage.mac.com/piquet/gif.html) или с пробной версией программы VSE Animation Maker (http://www.vse-online.com/).
Чтобы создать анимированный GIF, нужно прежде всего создать последовательность обычных графических файлов (например, в Paint Shop Pro или Graphic-Converter). Этот процесс называется созданием кадров для анимации. Эти кадры в специальной программе создания анимации выстраиваются в последовательность и сохраняются в формате animated GIF. На странице такой файл запросто размещается с помощью стандартного элемента <img />. Рассмотрим процесс создания анимации в различных приложениях.
|
|
|
|
|
Дата добавления: 2014-12-29; Просмотров: 391; Нарушение авторских прав?; Мы поможем в написании вашей работы!