40Px; font-family: arial"

align=middle>петродворец</td>

<tr> <td style="padding-right: 20px; padding-bottom: 0px" valign=top>

<table height="100%" cellspacing=0 cellpadding=0 width="100%" border=0>

<tbody> <tr> <td width=200>

<table height="100%" cellspacing=0 cellpadding=0 width="100%" border=0>

<tbody></tbody></table></td>

<td align=right <p>Нижний парк

<p align=right> Дворец Марли

<a class=text href="листинг 17.10.files/Воронихинские колонны.jpg">Новый .

Петергоф</a><p align=right>Большой Петергофский Дворец </p></td></tr></tbody></table>

</td>

<tr align=left height=155>

<td>

<span style="width: 200px; position: absolute; height: 155px"></span>

<span style="width: 443px; height: 100%"> </span></td></tr></tbody></table>

<table style="left: 0px; position: absolute; top: 0px" height=260 cellspacing=0

cellpadding=0 width=367 border=0>

<tbody><tr height=63><td> </td>

<tr height=24><td align=right>

<a class=menu href="Листинг 17.10.files/Большой Дворец.htm">Большой Дворец</a><img

height=1 src="Листинг 17.10.files/dot.gif" width=0></td>

<tr height=24>

<td align=right><b class=mmenu

onmouseover="mmm.style.display='inline';bgmmm.style.display='inline';"

onmouseout="mmm.style.display='none';bgmmm.style.display='none';">

фонтаны в нижнем парке</b>

<span class=spn id=mmm onmouseover="mmm.style.display='inline';bgmmm.style.

display='inline';" style="display: none"

onmouseout="mmm.style.display='none';bgmmm.style.display='none';">

<img height=20 src="Листинг 17.10.files/dot.gif" width=118>

<a class=menu href="Листинг 17.10.files/Пирамида.htm">Пирамида</a>

<img height=20 src="Листинг 17.10.files/dot.gif" width=8>

<span class=spn style="left: -40px; top: 16px">  Примеры использования стилей   253

<img height=20 src="Листинг 17.10.files/dot.gif" width=100>

<a class=menu href="Листинг 17.10.files/Золотая Горка.htm">Золотая  Горка</a>

<img height=20 src="Листинг 17.10.files/dot.gif" width=20>

<span class=spn style="left: -22px; top: 16px">

<img height=20 src="Листинг 17.10.files/dot.gif" width=100>

<a class=menu href="Листинг 17.10.files/Марли.htm">Марли</a>

<img height=20 src="Листинг 17.10.files/dot.gif" width=84>

<span class=spn style="left: -34px; top: 16px">

<img height=20 src="Листинг 17.10.files/dot.gif" width=64>

<a class=menu href="Листинг 17.10.files/Большой Дворец.htm">

Большой  Дворец</a>

<img height=20 src="Листинг 17.10.files/dot.gif" width=100>

<span class=spn style="left: -16px; top: 16px">

<img height=20 src="Листинг 17.10.files/dot.gif" width=62>

<a class=menu href="Листинг 17.10.files/Улица Аврова.htm">Улица Аврова</a>

<img height=20 src="Листинг 17.10.files/dot.gif" width=95>

<span class=spn style="left: 0px; top: 16px">

<img height=20 src="Листинг 17.10.files/dot.gif" width=41>

<a class=menu href="Листинг 17.10.files/Воронихинские колонны.htm">Воронихинские

колонны</a>

<img height=20 src="Листинг 17.10.files/dot.gif" width=94>

<span class=spn style="left: -20px; top: 16px">

<img height=20 src="Листинг 17.10.files/dot.gif" width=39>

<a class=menu href="Листинг 17.10.files/Серпуховская.htm">Серпуховская</a>

<img height=20 src="Листинг 17.10.files/dot.gif"width=58>

<span class=spn style="left: -17px; top: 16px">

<img height=20 src="Листинг 17.10.files/dot.gif" width=39>

<a class=menu href="Листинг 17.10.files/Особняк на фонтанке.htm">Особняк на фонтанке</a>

<img height=20 src="Листинг 17.10.files/dot.gif"

width=64> </span></span></span></span></span></span></span></span>

<img height=1 src="Листинг 17.10.files/dot.gif" width=52></td>

<tr height=24> <td align=right><a class=menu href="Листинг 17.10.files/Юсуповский

дворец.htm">

Юсуповский дворец</a><img height=1 src="Листинг 17.10.files/dot.gif" width=92></td>

<tr height=24><td align=right><a class=menu href="Листинг 17.10.files/Аничков мост.htm">

Аничков мост</a><img height=1 src="Листинг 17.10.files/dot.gif" width=152></td>

<tr height=24> <td align=right><a class=menu style="letter-spacing: 1px"

href="Листинг 17.10.files/На Фонтанке.htm">На Фонтанке</a>

<img height=1 src="Листинг 17.10.files/dot.gif" width=173></td>

<tr height=24><td align=right><a class=menu style="letter-spacing: 1px"

href="Листинг 17.10.files/Невский проспект.htm">Невский проспект</a>

<img height=1 src="Листинг 17.10.files/dot.gif" width=190></td>

<tr height=24><td align=right><a class=menu style="letter-spacing: 1px"

href="Листинг 17.10.files/Владимирский собор.htm">

собор</a><img height=1 src="Листинг 17.10.files/dot.gif" width=207></td>

<tr><td></td></tr></tbody></table>

<style>#bn {

display: block

}

#bt {

display: block

}

</style>

</body></html>254     Урок 17. Каскадные листы стилей 

В последней программе используется парный тег <SPAN>, который создает струк-

туру текстового уровня, определяемую пользователем Тег <SPAN> появился

в HTML версии 4 0 и применяется в сочетании с каскадными листами стилей

Подведем итоги

В этом уроке даны начальные сведения по большой и сложной теме каскадных

листов стилей Представлены определения стилей, их уровней, синтаксиса Рас-

смотрены методы группирования листов стилей Рассказано о четырех вариантах

использования листов стилей в HTML-документе — встраивание, подключение,

связывание, импорт В заключение урока приведены реальные примеры приме-

нения стилей Урок 18 Подготовка

изображений

для веб-страниц

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

особым образом подготовлено, в частности иметь небольшой размер 

в байтах, чтобы содержащая его веб-страница быстро загружалась. 

В этом уроке вкратце рассматриваются принципы подготовки изобра-

жений для веб-страниц с помощью программы Adobe Photoshop — 

наиболее  популярной  программы  обработки  растровой  графики.

Урок256     Урок 18. Подготовка изображений для веб-страниц  

Файловые операции

Для обработки изображения его нужно открыть Для этого служит команда

File  Open (Файл  Открыть) Диалоговое окно, появляющееся после выбора этой

команды, показано на рис 18 1

Рис 18 1  Выбор обрабатываемого изображения

Как вы знаете (см урок 3), на веб-страницах рекомендуется размещать изображе-

ния далеко не всех форматов, доступных в программе Adobe Photoshop Поэтому

первым шагом в обработке изображения является его преобразование из исходно-

го формата (например, PSD — «родного» формата программы Adobe Photoshop)

в формат, необходимый для размещения изображения на веб-странице Для этого до-

статочно воспользоваться командой File  Save as (Файл  Сохранить как) При выбо-

ре этой команды открывается диалоговое окно, которое представлено на рис 18 2

Все доступные в программе форматы перечислены в раскрывающемся списке

Format (Формат). Для сохранения файла изображение в наиболее распространен-

ном в Интернете формате GIF в этом списке нужно выбрать пункт CompuServ GIF 

(*.GIF), как показано на рис 18 2, и щелкнуть на кнопке Save (Сохранить)   Инструменты выделения   257

Рис 18 2  Сохранение изображения в выбранном формате

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

Очень часто возникает необходимость в коррекции отдельных частей изображе-

ния, например, что-то подправить, отрезать, сделать более ярким, изменить фон

и т д Корректировать можно только выделенные области, поэтому первоначаль-

но нужно научиться их выделять

В программе Adobe Photoshop выделять области изображения можно по размеру,

по форме, по цвету К инструментам выделения относится группа инструментов

прямоугольного выделения: Rectangular  Marquee  Tool (Прямоугольное  выделение),

Elliptical Marquee Tool (Эллиптическое выделение), Single Row Marquee Tool (Выделение 

строки пикселов), Single Column Marquee Tool (Выделение столбца пикселов), а также

группа инструментов лассо: Lasso  Tool (Лассо), Poliganol  Lasso Tool (Многоугольное 

лассо), Magnetic Lasso Tool (Магнитное лассо) Кроме того, к инструментам выделе-

ния относится инструмент Magic Wand (Волшебная палочка), принцип работы кото-

рого основывается на сходстве цветовых параметров пикселов 258     Урок 18. Подготовка изображений для веб-страниц  

Все инструменты выделения находятся в верхней части набора инструментов

(рис 18 4)

Рис 18 3  Инструменты выделения в наборе инструментов

Помимо инструментов для выделения можно использовать команды меню Select

(Выделить), в частности для выделения всего изображения применяется команда

All (Все), для отмены выделения — команда Deselect (Снять выделение), для превра-

щения всех выделенных фрагментов в невыделенные и наоборот — команда Invert

(Инвертировать), для повторного выделения ранее снятого выделения — команда

Reselect (Повторить выделение)

Изменение разрешения и размеров

изображения

Как известно, изображение, которое помещается на веб-страницу, должно иметь

маленький размер в байтах, чтобы содержащая его веб-страница быстро загру-

жалась Для уменьшения размера изображения в байтах существует несколько

приемов, в частности можно уменьшить разрешение изображение или его гео-

метрический размер Этой цели служит команда Image  Image Size (Изображе-

ние  Размеры изображения), при выборе которой открывается диалоговое окно,

показанное на рис 18 4

Хотя геометрические размеры изображения, помещаемого на веб-страницу, мож-

но отрегулировать атрибутами WEIGHT и HEIGHT тегов языка HTML, эти регули-

ровки никак не скажутся на размере изображения в байтах, а, значит, — и на ско-

рости его загрузки

Показанная на рис 18 4 фотография рыбы в аквариуме была выполнена цифро-

вым фотоаппаратом Как видно в диалоговом окне  Image Size (Размеры изобра-

жения), разрешение полученной фотографии составляет 180 пикселов на дюйм,

а геометрический размер — 36,58×27,43 см Конечно, такой файл («весом» более