<< Пред. стр.

стр. 18
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>

и heigh t, можно изменить размеры изображения при помощи языка HTML

Однако используйте эти хитрости благоразумно. Язык HTML - это программа
Photoshop для бедных, и вы определенно получите то, за что заплатили. Как правиио,
результаты трансформации изображения в специализированной программе для рабо-
ты с графикой выглядят лучше. И если сделать изображение меньшим при помощи
языка HTML, это не изменит времени его загрузки, как и если сделать изображение
большим, это не увеличит времени загрузки. Браузер всегда загружает исходный файл
с нормальными размерами, независимо от того, как вы трансформируете это изобра-
жение при помощи языка HTML.


Совет
Для чрезмерных трансформаций, наподобие тех, которые представ-
лены на рисунках 29.2 и 29.3, лучше редактировать изображения в
приложении, предназначенном для работы с графикой. Однако для
едва различимых местных изменений трансформации языка HTML в
целом работают прекрасно.
ГЛАВАЗО.
Размещение Внутристрочных изображений
при помощи языка HTML
Внутристрочные изображения - это изображения, отображаемые внутри блока
текста. Ими в основном являются изображения с содержимым, например, диаграм-
мы, графики и фотографии, в противоположность логотипам, кнопкам навигацион-
ной панели и другим элементам графического интерфейса, которые обычно имеют
свои собственные ячейки таблиц или CSS-разделы в макете страницы.


Совет
Внутристрочные изображения - это изображения, отображаемые
внутри блока HTML-текста.



Простейшим способом добавления внутристрочного изображения в языке HTML яв-
ляется вставка тега img как раз в том месте текста, где вы хотите отобразить изобра-
жение, как показано на рисунке 30.1. Как можно заметить, это метод является рабо-
тоспособным, но не очень эстетически приятным. Если высота изображения больше
высоты окружающего текста в пунктах, браузер разделит строки текста самым неп-
ривлекательным способом, который можно себе представить.
Листинг 30.1. Просмотр исходного кода для рисунка 30.1
<h2>A complete b r a i n - t r u s t solution</h2>
<p>When you consult with us, y o u ' l l be amazed at the r e s u l t s . W offer
e
the most i n t e r e s t i n g , c r e a t i v e , out-of-the-box, and forward-thinking
ideas <img src="images/bulb.gif" width="47" height="84"> in the
industry. You won't believe what w e ' l l come up with next. We have won
several i n t e r n a t i o n a l awards for our ideas alone, including the p r e s -
t i g i o u s Nobel P r i z e . You simply won't find b e t t e r ideas anywhere.</p>

Атрибут a l ign тега img помогает разместить изображение более эффективно, как по-
казано на рисунке 30.2. Просто выберите значение атрибута a l i g n из таблицы 30.1.
Можно сделать так, чтобы изображения плавало с левой или правой стороны всего
блока текста, или можно выровнять изображение вертикально по верху, центру или
низу строки текста, в которой отображается внутристрочное изображение.


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




A complete brain-trust solution A complete brain-trust solution
\When you consult with us, you'll be amazed at the results. We offer the most




9
When you consult with us, you'll be amazed at the
interesting, cieative, out-of-the-box, and forward-thinking ideas in the industry
results. W e offer the most interesting, creative, out-
' Y o u won't believe what we'll come up with next We have won several
of-the-box, and forward-thinkjng ideas in the
international awards for our ideas alone, including the prestigious Nobel Prize
industry You won't believe what we'll come up with
You simply won't find better ideas anywhere.
next We have won several international awards for
our ideas alone, including the prestigious Nobel Prize You
simply won't find better ideas anywhere.




Puc. 30.2. Использование
Puc. 30.1. Размещение тега img внутри блока атрибута align тега изображения
текста создает внутристрочное изображение, сообщает браузеру, как разместить
однако браузер разделяет строки текста изображение относительно
без всякой искусной утонченности окружающего текста

Листинг 30.2. Просмотр исходного кода для рисунка 30.2
<h2>A complete brain-trust solution</h2>
<pximg src="images/bulb.gif" width="47" height="84" align="left">
When you consult with us, you'll be amazed at the r e s u l t s . W offer
e
the most interesting, creative, out-of-the-box, and forward-think-
ing ideas in the industry. You won't believe what we'll come up with
next. W have won several international awards for our ideas alone,
e
including the prestigious Nobel Prize. You simply won't find bet-
ter ideas anywhere.</p>


Табл. ЗОЛ. Значения атрибута align тега img

Значение Результат

Вертикально выравнивает низ изображения по низу или по ба; к >
-
bottom вой линии строки текста

Делает изображение плавающим с левой стороны блока текста
left
Вертикально выравнивает изображение по центральной строке
middle текста
Делает изображение плавающим с правой стороны блока текста
right
Вертикально выравнивает верх изображения по верху строки
top текста



Совет
Чтобы внутристрочное изображение плавало с левой или правой сто-
роны блока текста, переместите тег img в начало блока текста, как
показано в листинге 30.2.
ГЛАВА31.
Плавающие внутристрочные изображения
с использованием таблиц CSS
Как и со всеми вопросами, связанными с дизайном и форматированием, в наши дни
политически корректным методом для создания плавающих внутристрочных изобра-
жений является не присваивание значений l e f t или r i g h t атрибуту a l i g n тега img
(за дополнительной информацией обратитесь к главе 30), а использование каскадных
таблиц стилей (CSS). Положительным моментом является то, что таблицы CSS пре-
доставляют больше возможностей, чем атрибут a l i g n . Отрицательным моментом яв-
ляется то, что браузеры регулярно теряют сознание от таблиц CSS везде, где находят
их, поэтому необходимо проверять свои CSS-стили на множестве браузеров.
Первый шаг заключается в превращении внутристрочного изображения в плавающее
рядом с блоком текста, как показано на рисунке 31.1. Как можно догадаться, определе-
ние CSS-стиля f l o a t : l e f t ; размещает изображение с левой стороны блока текста,
а определение f l o a t : r i g h t ; размещает изображение с правой стороны.

File Ее* View Favorites Iwls



A complete brain-trust solution
^ When you consult with us, you'll be amazed at the results We offer the most
resting, creative, out-of-the-box, and forward-thinking ideas in the industry
' You won't believe what well come up with next We have won several
international awards for our ideas alone, including the prestigious Nobel Prize
You simply won't find better ideas anywhere.




Рис. 31.1. Достаточно просто превратить внутристрочное изображение
в плавающее при помощи таблиц CSS

Листинг 31.1. Просмотр исходного кода для рисунка 31.1
<h2>A complete brain-trust solution</h2>
<pximg src = "images/bulb.gif" width="47" height="84" style="f loat:
left;">When you consult with us, you'll be amazed at the results.
W offer the most interesting, creative, out-of-the-box, and for-
e
ward-thinking ideas in the industry. You won't believe what we'll
come up with next. W have won several international awards for our
e
ideas alone, including the prestigious Nobel Prize. You simply won't
find better ideas anywhere.</p>
174 Строим Web-сайты

Пока все хорошо, но таблицы CSS не дали нам ничего, чего бы мы не смогли сделать
при помощи атрибута a l i g n тега img. Веселье начинается, когда сплошной блок текс-
та разбивается на две или более части, как показано на рисунке 31.2. Вы сможете изме-.
нить способ обтекания плавающего изображения дополнительными блоками текста.
Листинг 31.2. Просмотр исходного кода для рисунка 31.2
<h2>A complete b r a i n - t r u s t solution</h2>
<img src="images/bulb.gif" width="47" • height="84" style="float:
left;">
<p>When you consult with us, y o u ' l l be amazed a t the r e s u l t s . You
won't b e l i e v e what w e ' l l come up with next.</p>
<p>We have won s e v e r a l i n t e r n a t i o n a l awards for our ideas alone,
including the p r e s t i g i o u s Nobel P r i z e . You simply won't find bet-
ter ideas anywhere.</p>


Eto Edit ttew Favorite* Ioois Mdp

A complete brain-trust solution
When you consult with us, you'll be amazed at the
;ults You won't believe what we'll come up with



We have won several international awards for our
ideas alone, including tiie prestigious Nobel Prize. You simply
won't find better ideas anywhere




Puc. 31.2. Обычно при разбивании текста на два блока,
второй блок красиво обтекает плавающее изображение, как и первый
Так, если запретить обтекание нового абзаца с левой стороны, то он будет располо-
жен прямо под левым плавающим изображением вместо того, чтобы обтекать это
изображение, как показано на рисунке 31.3.



A complete brain-trust solution
When you consult with us, you'll be amazed at the
:sults You won't believe what well come up with
next




We have won several international awards for our ideas
alone, including the prestigious Nobel Prize We have won
more awards Ihan any other brain trust in the greater
Cleveland area You simply won't find better ideas anywhere
In fact, we guarantee it How's that for a great idea?




Puc. 31.3. Если запретить обтекание второго абзаца елевой стороны,
текст будет вынужден располагаться прямо под левым плавающим изображением
ГЛАВА 3 1 . Плавающие внутристрочные изображения 175

Листинг 31.3. Просмотр исходного кода для рисунка 31.3
<h2>A complete brain-trust soiution</h2>
<img src="images/bulb.gif" width="47", height="84" style="float:
left;">
<p>When you consult with us, you'll be amazed at the r e s u l t s . You
won't believe what we'll come up with next.</p>
<p style="clear: left;">We have won several international awards for
our ideas alone, including the prestigious Nobel Prize. You simply
won't find better ideas anywhere.</p>

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



A complete brain-trust solution
"\When you consult with us, you'll b e amazed at the
-esuks You won't believe what we'll tome up with
next.




We have won several international awards for our
ideas alone, including the prestigious Nobel Prize
We have won more awards than any other brain trust
m the greater Cleveland area. You simply won't find better
ideas anywhere In fact, we guarantee it How's that for a
great idea?




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


Листинг 31.4. Просмотр исходного кода для рисунка 31.4
<h2>A complete brain-trust solution</h2>
<img src="images/bulb.gif" width="47" height="84" style="float:
left;">
<p>When you consult with us, you'll be amazed at the r e s u l t s . You
won't believe what we'll come up with next.</p>
<img src="images/bulb.gif" width="47" height="84" style="float:
right; "> '
<p styie="clear: left;">We have won several international awards for
our ideas alone, including the prestigious Nobel Prize. W have won
e
more awards than any other brain trust in the greater Cleveland
area. You simply won't find better ideas anywhere. In fact, we guar-
antee i t . How's that for a great idea?</p>
Строим Web-сайты
176




Совет
Чтобы запретить обтекание правого плавающего изображения, ис-
пользуйте определение clear: right;.



Если вы хотите для второго абзаца запретить обтекание плавающих изображений
справа и слева, используйте определение стиля c l e a r : both;.
В таблице 31.1 приведены CSS-стили для создания плавающих изображений и для за1 [
-
рещения обтекания.
Табл. 31.1. Создание плавающих изображений
и запрещение обтекания при помощи таблиц CSS

Стиль Результат

Запрещает обтекание блоком текста предыдущих левых
clear: both; и правых плавающих изображений

Запрещает обтекание блоком текста предыдущих левых
clear: left; плавающих изображений

Запрещает обтекание блоком текста предыдущих пра-
c l e a r : right; вых плавающих изображений

Создает плавающее изображение с левой стороны пос-
float: left; ледующих блоков текста

Создает плавающее изображение с правой стороны
float: right; последующих блоков текста
ГЛАВА 32.
Разработка состояний кнопок
СОСТОЯНИЯ КНОПКИ - это различные представления, которые принимает графичес-
кое изображение кнопки в зависимости от вида взаимодействия посетителя с кноп-
кой. Для Web-сайта, основанного на языке DHTML, обычно определено два состоя-
ния кнопки: состояние по умолчанию, определяющее, как выглядит кнопка в обыч-
ных условиях; и состояние onMouseOver, определяющее, как выглядит кнопка, когда
посетитель наводит на нее указатель мыши. (Ролловерная функция, написанная на
языке JavaScript, производит переключение между этими двумя состояниями.) Сайты,
построенные на базе технологии Macromedia Flash, обычно включают третье состоя-
ние: состояние onclick, определяющее, как выглядит кнопка, когда посетитель щел-
кает на ней.


Определение
СОСТОЯНИЯ КНОПКИ - это различные представления, которые прини-
мает графическое изображение кнопки в зависимости от вида взаи-
модействия посетителя с кнопкой.


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


Часто задаваемые вопросы
ЧТО за странная терминология для состояний кнопки?
Вините язык JavaScript. Имена для событий кнопки onMouseOver и
onCl i ck произошли от соответствующих событий в языке JavaScript.


Когда наступает время разрабатывать состояния для своих кнопок, мы хотим изв-
лечь выгоду из психологии того, что происходит. Другими словами, мы хотим, что-
бы визуальные эффекты соответствовали направлению, в котором работает разум
посетителя. Не нужно противоречить психологии - делать обратное тому, что ожи-
дает разум посетителя, - иначе ваш сайт будет посылать сбивающие с толку сообще-
ния, и визуальная обратная связь будет создавать путаницу, а не улучшать удобство
использования.
Вот теория: разрабатывайте состояния кнопок с увеличением энергии. Каждое пос-
ледующее состояние кнопки должно «подниматься на ступеньку выше», следуя логи-
ческой последовательности, в которой посетитель взаимодействует с кнопкой. Сле-
довательно, состояние по умолчанию должно иметь наименьшее количество энер-
гии, поскольку посетитель совсем не взаимодействует с ним. Состояние
Строим Web-сайты
178

onMouseOver должно подняться на ступеньку выше, как будто кнопка впитывает ки-
нетическую энергию, которую генерирует посетитель, перемещая мышь. И состоя-
ние o n c l i c k (если у вас есть такое состояние) должно подниматься еще на одну сту-
пеньку, соответствующую дополнительной кинетической энергии, получаемой при
щелчке мышью.
Все, что мы делаем здесь, - это графически дублируем способ функционирования ре-
ального объекта, наподобие механизма: появляется энергия и что-то происходит. Свс;-
тодиод компьютера не гаснет, когда включается питание, и продолжает гореть всю
ночь, пока не будет выключено питание. Это не создает наглядного восприятия.
Сколько графических кнопок вы видели в Интернете до сих пор, которые как будто
выключались при наведении на них мыши? Если вы разрабатываете кнопки, которые
опускаются на ступеньку ниже, когда посетитель взаимодействует с ними, кажется,
что кнопки поглощают энергию и противоречат законам физики, как плохая террито-
рия в фильме «Star Trek».
Когда появляется энергия, что-то происходит. Что точно будет происходить, завис и г
от вас, но в таблице 32.1 собраны некоторые предложения, а на рисунке 32.1 показа-
но несколько последовательностей состояний кнопок.




Рис. 32.1. В этих последовательностях состояний кнопок
используется переход от низкой энергии к более высокой,
чего интуитивно и ожидает посетитель
ГЛАВА 32. Разработка состояний кнопок 179

Табл. 32.1. Дизайнерские предложения для состояний кнопок

Состояние onMouseOver Состояние onClick (Активация)
(Подсвечивание)
• Сделать ярче цвет текстовой • Сделать так, чтобы кнопка выгля-
метки; дела нажатой;
• Сделать ярче цвет лицевой части • Сделать так, чтобы кнопка выг-
кнопки; лядела полностью включенной
(если состояние onMouseOver
• Добавить рамку или свечение вок-

<< Пред. стр.

стр. 18
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>