Dreamweaver MX 2004 для "чайников" [Джанин Уорнер] (pdf) читать онлайн

Для
сомневающихся
Джанин Уорнер
консультант и автор
нескольких книг,
посвященных Internet

Сюзанна Гарднер
Web-дизайнер
и преподаватель

D r e a m w e a v e r

M

X

2 0 0 4
**"* -"""л "f^

DUMMIE&

b
y
J
a
n
n
i
e
W
a
r
n
e
r
and Susannah Gardner

WILEY
Wiley Publishing, Inc.

'eamw-

1ЪЧ Л

шй

ЧАЙНИКОВ

D r e a m w e a v e r

M

X

2 0 0 4

ДЛЯ

"ЧАЙНИКОВ"Джанин Уорнер
Сюзанна Гарднер

ДИАЛЕКТИКА

•

Москва • Санкт-Петербург • Киев
2004

ББК 32.973.26-018.2.75
У64
УДК 681.3.07

Компьютерное издательство "Диалектика"
Главный редактор С.Н. Тригуб
*"•* Зав. редакцией В.В, Александров

'

Перевод с английского и редакция А.А. Борисенко
По общим вопросам обращайтесь в издательство "Диалектика" по адресу:
info@dialektika.com, http://www.dialektika.com

Уорнер, Джанни, Гарднер, Сюзанна.
У64 Dreamweaver MX 2004 для "чайников". : Цер. с англ. — М. : Издательский дом
"Вильяме", 2004. — 352 с : ил. — Парал. тит. ангй.
ISBN 5-8459-0645-8 (рус.)
Если вы настоящий Web-дизайнер, то у вас нет времени читать толстую книгу (ведь
вы все время что-то творите). Именно по этой причине была написана данная книга —
краткое руководство к действию. Ее не обязательно читать главу за главой. Если вы торопитесь, то просто найдите необходимую информацию и возвращайтесь к работе. Если
вы новичок в Web-дизайне или просто решили глубже разобраться в программе
Dreamweaver MX 2004, сначала бегло просмотрите главы, а затем внимательно прочтите
то, что касается вашего проекта. Независимо от того, работаете вы первый раз над простым узлом либо уже в который раз изменяете дизайн сложного узла, на этих страницах
вы найдете все, что вам необходимо.
ББК 32.973.26-018.2.75

Все названия программных продуктов являются зарегистрированными торговыми марками соответствующих фирм.
Никакая часть настоящего издания ни в каких целях не может быть воспроизведена в какой бы то ни было
форме и какими бы то ни было средствами, будь то электронные или механические, включая фотокопирование
и запись на магнитный носитель, если на это нет письменного разрешения издательства Wiley Publishing, Inc.
Copyright © 2004 by Dialektika Computer Publishing.
Original English language edition copyright © 2004 by Wiley Publishing, Inc.
All rights reserved including the right of reproduction in whole or in part in any form. This translation published
by arrangement with Wiley Publishing, Inc.

ISBN 5-8459-0645-8 (рус.)
ISBN 0-7645-4342-3 (англ.)

© Компьютерное изд-во "Диалектика", 2004
© Wiley Publishing, Inc., 2004

Оглавление
Введение

18

ЧАСТЬ I. ОСУЩЕСТВЛЕНИЕ МЕЧТЫ

23

Глава 1. Позвольте представить вам нового друга

25

Глава 2. Задание параметров Web-узла в Dreamweaver

45

ЧАСТЬ II. ВЫГЛЯДИТ НА МИЛЛИОН (ДАЖЕ ПО СМЕТЕ)

69

Глава 3. Проектирование узла

71

Глава 4. Координирование работ по дизайну

88

Глава 5. Добавление графики

108

ЧАСТЬ III. УЛУЧШЕНИЕ УЗЛА

129

Глава 6. Знакомство с HTML-таблицей

131

Глава 7. Разбиение страниц на фреймы

153

Глава 8. Каскадные таблицы стилей

170

ЧАСТЬ IV. ДЕЛАЕМ УЗЕЛ ЕЩЕ КРУЧЕ

207

Глава 9. Слои, DHTML и поведения

209

Глава 10. Интеграция Fireworks и Dreamweaver

230

Глава 11. Добавляем мультимедиа

240

Глава 12. Формы

258

ЧАСТЬ V. РАБОТА С ДИНАМИЧЕСКИМ СОДЕРЖИМЫМ

271

Глава 13. Построение динамического Web-узла. Введение

273

Глава 14. Перемешиваем данные

284

Глава 15. Построение динамического Web-узла. Использование форм

301

ЧАСТЬ VI. ВЕЛИКОЛЕПНЫЕ ДЕСЯТКИ

317

Глава 16. Десять Web-узлов, созданных с помощью Dreamweaver

319

Глава 17. Десять идей, которые смело можно использовать на Web-узле

329

Глава 18. Десять советов, которые позволят сэкономить время

334

Предметный указатель

338

Содержание
Введение
Почему именно Dreamweaver?
Некоторые предположения
Об этой книге
Условные обозначения, принятые в книге
Структура книги
Часть I. Осуществление мечты
Часть П. Выглядит на миллион (даже по смете)
Часть III. Улучшение узла
Часть IV. Делаем узел еще круче
Часть V. Работа с динамическим содержимым
Часть VI. Великолепные десятки
Пиктограммы, которые используются в этой книге
Куда двигаться дальше

18
18
19
19
19
20
20
20
20
20
21
21
21
22

ЧАСТЬ I. ОСУЩЕСТВЛЕНИЕ МЕЧТЫ

23

Глава 1. Позвольте представить вам нового друга

25

Итак, что же нового появилось в Dreamweaver MX 2004?
Знакомство с компонентами программы Dreamweaver
Рабочая среда
Работа с Web-страницами, созданными в другой программе для Web-дизайна
Microsoft FrontPage
Microsoft Word
NetObjects Fusion
Adobe GoLive
Другие HTML-редакторы
Глава 2. Задание параметров Web-узла в Dreamweaver
Визуализация узла
Задание параметров нового или существующего узла
Определение узла
Задание параметров доступа к Web-серверу
Использование Check In/Out
Использование сервера тестирования
Использование заметок по дизайну
Активизация макета карты узла
Загрузка существующего Web-узла
Создание новых страниц
Проектирование первой страницы
Создание заголовка
Управление отступами
Добавление изображений
Создание ссылок
Подключение страниц в рамках одного Web-узла

25
28
28
41
41
42
42
43
43
45
45
46
47
48
50
51
51
52
54
56
56
57
58
58
61
62

Установка ссылок к именованным анкерам на странице
Установка ссылок на страницы, расположенные за пределами вашего
Web-узла
Установка ссылки на адрес электронной почты
Просмотр страницы в браузере
Изменение свойств страницы
Подключение Web-узла к Internet

62
63
64
65
65
66

ЧАСТЬ II. ВЫГЛЯДИТ НА МИЛЛИОН (ДАЖЕ ПО СМЕТЕ)

69

Глава 3. Проектирование узла

71

Подготовка к разработке
Разработка нового узла
У правление структурой узла
Присвоение имен в узле
Организация изображений
Манипулирование ссылками
Поиск и исправление прерванных ссылок
Поиск прерванных ссылок
Исправление прерванных ссылок
Использование функции Site Reporting для проверки работы
Синхронизация локального и удаленного узлов
Параметры сокрытия
Глава 4. Координирование работ по дизайну
Создание шаблона определенного типа
Создание шаблонов
Сохранение страницы в качестве шаблона
Использование шаблонов
Внесение глобальных изменений с помощью шаблонов
Повторное использование элементов с помощью функции Library
Создание и использование элементов библиотеки
Делаем элементы библиотеки редактируемыми
Использование трассирующего изображения при разметке
Общение с помощью заметок по дизайну
Общение с использованием встроенной электронной почты
Возвращение к истории
Использование быстрого редактора дескрипторов
Глава 5. Добавление графики
Получение профессиональной графики
Приобретение коллекций клипов и фотографий
Создание собственных изображений
Основы Web-графики
Вставка изображений на страницы
Выравнивание изображений на странице
Центрирование изображения
Выравнивание изображения, окруженного текстом
Создание сложного дизайна с помощью изображений

Содержание

71
72
72
73
74
75
77
78
78
80
83
85
88
88
89
93
93
94
96
96
98
99
101
103
104
105
108
108
109
109
112
114,
115
115
116
118

7

Редактирование изображения в Dreamweaver
Обрезка изображения
Изменение яркости и контраста
Изменение резкости изображения
Трюк с прозрачным GDF-изображением
Создание фона
Создание карт изображений

118
119
120
120
121
122
125

ЧАСТЬ Ш. УЛУЧШЕНИЕ УЗЛА

129

Глава 6. Знакомство с HTML-таблицей

131

Таблицы или CSS-слои?
Создание простых таблиц в режиме Layout
Редактирование таблиц в режиме Layout
Использование режима Expanded
Опции таблицы
У правление опциями ячейки
Использование свойства форматирования таблицы
Форматирование нескольких столбцов таблицы
Использование свойства сортировки таблицы
Вставка данных таблицы из других программ
Использование таблиц для установки интервалов и выравнивания
Использование таблиц при проектировании форм
Выравнивание строки перемещения
Слияние ячеек таблицы
*
Использование вложенных таблиц

131
132
135
136
136
139
141
142
144
145
146
147
148
151
152

Глава 7. Разбиение страниц на фреймы

153

Оценка HTML-фреймов
Принцип работы фреймов
Создание фрейма в программе Dreamweaver
Сохранение файлов в наборе фреймов
Установка целевых объектов и ссылок во фреймах
Присвоение имен фреймам
Установка ссылок на целевой фрейм
Сравнение целевых объектов
Изменение свойств фреймов
Изменение границ фреймов
Изменение размера фрейма
Параметры изменения размеров и прокрутки
Установка высоты и ширины поля
Создание альтернативного дизайна для старых браузеров
Глава 8. Каскадные таблицы стилей
Проверка совместимости браузера
Оценка каскадных таблиц стилей
Код CSS-стилей
Так все-таки, что значит "каскадные"?
Расширенные возможности CSS-стилей

8

153
155
157
159
161
161
163
164
166
166
167
167
168
168
.

170
171
171
171
173
174

Содержание

Преимущества CSS-стилей
Использование CSS в программе Dreamweaver
Типы CSS-стилей
Создание нового CSS-стиля
Определение правил
Создание нового стиля
Применение стилей в программе Dreamweaver
Удаление стилей в программе Dreamweaver
Переопределение HTML-дескрипторов
Работа с CSS-селекторами
Редактирование существующего стиля
Использование внешних таблиц стилей
Создание внешней таблицы стилей
Присоединение внешней таблицы стилей
Редактирование внешней таблицы стилей
Применение готовых внешних таблиц стилей
Использование временных таблиц стилей
Использование CSS с шаблонами
Использование CSS в макете страницы
Контейнерная модель
Дескриптор

/ 1 7 4
174
175
175
177
185
187
189
189
191
194
195
196
196
197
198
199
200
200
201
202

ЧАСТЬ IV. ДЕЛАЕМ УЗЕЛ ЕЩЕ КРУЧЕ

207

Глава 9. Слои, DHTML и поведения

209

Работа со слоями
Создание слоев
Добавление элементов, а также изменение размеров и положения слоев
Наложение слоев и изменение видимости
Вложенные слои — одна счастливая семья
Установка параметров слоя
Преобразование слоев в таблицы. Точное позиционирование для старых
браузеров
Понятие о DHTML
Работа с поведениями
Присоединение поведений
Присоединение нескольких поведений
Редактирование поведения
Будут ли ваши страницы работать со старыми браузерами?
Использование расширений и диспетчера упаковки
Преобразование в XHTML
Глава 10. Интеграция Fireworks и Dreamweaver
От Dreamweaver к Fireworks: редактирование изображений
Использование отличных от Fireworks графических редакторов
От Dreamweaver к Fireworks: оптимизация изображения
Вставка Fireworks HTML
Редактирование HTML, созданного в Fireworks

Содержание

209
210
210
212
214
215
217
218
218
219
225
225
226
227
228
230

*

230
233
235
237
237

9

Глава 11. Добавляем мультимедиа

240

Работа с файлами Macromedia Shockwave и Flash
Что такое Shockwave
Что такое Flash
Добавление Shockwave и Flash-фильмов
Установка параметров и других опций Shockwave и Flash
Создание Flash-файлов средствами Dreamweaver
Создание Flash-кнопок
Добавление новых стилей кнопок
Работа с Java
Добавление Java-аплетов
Установка параметров Java и других опций
Использование объектов и элементов управления ActiveX
Работа с другими технологиями надстроек
Добавление надстроек Netscape Navigator
Установка параметров Netscape-надстройки и других опций

240
241
242
243
244
247
249
250
250
251
251
252
254
254
256

Глава 12. Формы

258

Назначение HTML-форм
Создание HTML-форм
Сравнение переключателей и флажков
Добавление текстовых полей
Создание раскрывающихся списков
Завершение формы посредством добавления кнопок Submit и Clear
Использование меню перехода
Специальные элементны формы в редакторе Dreamweaver
Улучшение внешнего вида формы

259
259
261
264
266
267
268
270
270

ЧАСТЬ V. РАБОТА С ДИНАМИЧЕСКИМ СОДЕРЖИМЫМ

271

Глава 13. Построение динамического Web-узла. Введение

273

Понятие динамического Web-узла
Ключевые понятия
Изучение базы данных
Как это работает в World Wide Web
Приложения баз данных
Подключение
Настройка Web-сервера
Серверные технологии, поддерживаемые Dreamweaver MX
ASP
ASP.NET
Java Server Pages (JSP)
ColdFusion
PHP
Подключение к данным
Настройка DSN
Настройка Dreamweaver MX 2004 для Windows
Настройка Dreamweaver MX 2004 для пользователей Mac

10

273
274
274
275
275
276
276
276
277
277
277
277
277
278
278
280
283

Содержание

Глава 14. Перемешиваем данные
Изучение панели
Панель Database
Панель Bindings
Панель Server Behaviors
Создание набора записей
Использование набора записей на странице
Повторение области страницы
Добавление динамического изображения
Привязка изображения
Добавление перемещения на динамическую страницу
Создание набора страниц родительская/дочерняя
Глава 15. Построение динамического Web-узла. Использование форм
Аутентификация пользователя
Создание регистрационной страницы
Ограниченный доступ к страницам
Безопасность данных на Web-узле
Поиск записей в базе данных
Настройка поисковой страницы
Настройка результирующей страницы
Редактирование базы данных из браузера
Добавление записи в базу данных
Обновление записи из браузера
Основы электронной коммерции
Какой Web-узел электронной коммерции можно назвать "коммерческим"
Расширение функций Dreamweaver
*

Ч А С Т Ь VI. В Е Л И К О Л Е П Н Ы Е ДЕСЯТКИ
Глава 16. Десять Web-узлов, созданных с помощью Dreamweaver

284
284
284
285
286
289
290
292
293
294
297
299
301
301
301
304
305
306
306
307
309
309
311
314
314
315

317
319

Internet-консультанты Hop Studios
Bloom Art Walk Public Art Project
Наставник по кибер-романтйке
Раскрытие преступлений и правосудие. Путеводитель для журналистов
Филипп Матт Гарднер, художник
Кажется, это Рейн
Мишель С. Оверинг и корпорация профессионалов
Природный Woman.com
Юмор
Ваш покорный слуга

319
319
321
322
323
323
324
325
326
327

Глава 17. Десять идей, которые смело можно использовать на Web-узле

329

Упрощайте
Свободное место Web-страницы
Проектируйте для своей аудитории
Создавайте резервные копии
Будьте последовательны

Содержание

329
329
330
330
330

11

Меньше и быстрее
Доступный дизайн
Следуйте правилу трех щелчков
Начертите карту
Последние новости
Глава 18. Десять советов, которые позволят сэкономить время
Испробуйте новый интерфейс
Создание динамических Web-узлов
Разделение режимов. Работа с кодом
Добавление таблиц в дизайн
Проектирование во Flash
Обработка изображений в Fireworks
Поиск функциональных шрифтов
Поддержка DHTML в браузерах
Гид для ваших посетителей
Разместите часто используемые элементы рядом
Предметный указатель

12

331
3.31
331
332
332
, 334
334
334
335
335
335
336
336
336
337
337
338

Содержание

06o£fnoftax
Джанни Уорнер (Janine Warner) — автор многих популярных книг и профессиональный
оратор. Она имеет богатый опыт работы в средствах массовой информации, а также владеет
современными Internet-технологиями. Джанни является автором и соавтором нескольких
книг, посвященных Internet: Managing Web Projects For Dummies, Macromedia Contribute For
Dummies, 50 Fast Dreamweaver Techniques и Dreamweaver MX для "чайников ".
Джанин принимала участие в специальных выпусках новостей на каналах NBC и TECHTV, ее
также приглашали на радиостанции Соединенных Штатов и других стран. Ее авторская колонка
"Beyond the Nef выходит в печатном виде и в Internet, в том числе, в издании The Miami Herald.
Джанин консультирует большое количество клиентов — от bitemet-компаний до серьезных организаций в Соединенных Штатах и за рубежом. Ее знания в области мультимедийных, технологий
и образование помогли ей стать высококвалифицированным специалистом, которого знают от
Майами до Мехико, а ее ораторские способности известны от Нью-Йорка до Нью-Дели.
Джанин читала лекции в университете Южной Калифорнии, школы коммуникаций
Аненнберга и в университете Майами. Сейчас она работает управляющим программы мультимедиа-центра Western Knight и Internet-программы университета Южной Калифорнии.
С 1998 по 2000 год она работала в газете The Miami Herald сначала исполнительным редактором, а позднее — директором New Media. Под ее руководством находились дизайнеры,
программисты, журналисты и маркетологи многих изданий: The Miami Herald, El Nuevo Herald
и Miami.com. Джанин также была директором латиноамериканского отделения CNET
Networks — международной компании, освещающей различные технологии.
С 1994 по 1998 год Джанин Уорнер управляла компанией Visiontec Communications, которая занималась Web-дизайном в северной Калифорнии. Там она работала над такими проектами, как создание intranet-сети компании Levi Strauss & Co., разработка узла продаж компании AirTouch International и выработка решений для электронной коммерции многих средних и мелких компаний.
Будучи корреспондентом, она получила награду и степень по журналистике и испанскому
языку в университете Массачусетс, город Амхерст, и несколько лет работала в Северной Калифорнии корреспондентом и редактором. Свободно владеет испанским.
Чтобы узнать о ней больше, посетите узел www. j a n i n e w a r n e r . com
Сюзанна Гарднер (Susannah Gardner) — основатель и исполнительный директор компании Hop Studios Internet Consultants ( w w w . h o p s t u d i o s . com), занимающейся Web-дизайном
и специализирующейся на нестандартных Web-решениях.
Сюзанна также является независимым писателем и работает на факультете университета
Южной Калифорнии в школе коммуникаций.
Кроме того, она участвует в Internet-программе университета Южной Калифорнии, а также управляет исследованиями в области технологий и журналистики.
Сюзанна четыре года работала в газете The Los Angeles Times, являлась одним из первых
дизайнеров, которые работали над Web-узлом газеты, после чего ее выдвинули на должность
мультимедиа-директора.
Сюзанна Гарднер получила степень бакалавра по журналистике и американской литературе в USC. Сегодня она готовится получить степень магистра гуманитарных наук. Ей нравятся
кошки, изысканная еда, книги и путешествия.
Франк Вера (Frank Vera) является консультантом по Web-разработке. Она специалист по
программированию динамических Web-узлов.
Благодаря более чем семилетнему опыту программирования для Web, Франк осуществляет Web-разработки с использованием HTML, XML, Vignette StoryServer и Syndication Server,

PHP, Tel, C++, Visual Basic, Java, Perl, ASP, Oracle и MySQL. Он имеет богатый опыт работы
с программами по Web-дизайну, включая Macromedia Dreamweaver и Microsoft FrontPage.
С 2000 по 2002 год Франк работал в компании ZDNet Latin America вначале управляющим издательскими операциями, а затем директором отдела технологий, где он контролировал технологические операции, писал документацию к собственным системам и участвовал
в обучающих программах для сотрудников США и Латинской Америки. Помимо этого,
Франк работал системным администратором в компании РР Corp. в Майами, штат Флорида.
Франк изучал компьютерную анимацию в институте искусств Fort Lauderdale, является
сертифицированным системным инженером Microsoft.

14

Об авторах

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

TMaioqafiftoatiu
Джанин. В своих книгах я всегда благодарю: бывших учителей, советников, друзей — но
сейчас я благодарна такому количеству замечательных людей, что ни одно издательство не
предоставит мне столько страниц, чтобы выразить благодарность им всем. Поэтому я отмечу
лишь тех, благодаря которым эта книга увидела свет.
Прежде всего, хочу поблагодарить своего замечательного соавтора Сузанну Гарднер за то,
что она всегда ориентировалась на высокое качество книги, даже несмотря на довольно краткие сроки, и за то, что она разрешила использовать примеры своих дизайнерских работ
(их можно увидеть по адресу www. hops t u d i o s . com).
Большое спасибо Франку Вера, отличному программисту, общительному человеку, который пересмотрел три наиболее сложные главы этой книги — 13, 14 и 15 (они посвящены динамическим функциям баз данных в Dreamweaver). Нет никаких сомнений, что, если бы мои
соавторы написали свои собственные книги, то любое издательство с радостью выпустило бы
их. Также хочу поблагодарить Пола Вачиера (Paul Vachier) за взимание к этой книге.
Спасибо Беки Хьюлз (Becky Huehls), нашему всепонимающему редактору за то, что она
не давала нам сбиться с пути истинного и помогала сделать эту книгу более понятной и не
лишенной смысла. Спасибо Бобу Уорнеру (Bob Woerner) за то, что он контролировал книгу
в процессе написания и издания. Спасибо Марго Малей (Margot Maley), моему замечательному агенту* которая помогала мне заниматься этой книгой.
Я выражала благодарности в таком количестве книг, что мои родители уже сбились со
счета, но я всегда отправляю им копии и очень благодарю. Я люблю вас всех — Малинду
(Malinda), Джанис (Janice), Хелен (Helen) и Робина (Robin). Спасибо вам за вашу любовь,
поддержку и понимание.
И, наконец, благодарю звезды за то, что эта книга наконец-то закончена. Окончательно
и бесповоротно. Вот так. (И не говорите мне, что все это незаконченные предложения.)
Сюзанна. Прежде всего, хочу поблагодарить Джанин Уорнер, друга и коллегу, которая
предоставила мне возможность поработать над этой книгой вместе с ней. Она всегда была готова помочь советом. Я мечтала написать техническую книгу, но без Джанин прошло бы еще
несколько лет, прежде чем это случилось бы. Спасибо Джанин за пинок (сама знаешь куда).
Когда-нибудь я напишу книгу, в которой моему удивительному мужу, Тревису Смиту
(Travis Smith), я посвящу целую страницу благодарностей, так как он того заслуживает. Тревис, наверное, был более взволнован этим проектом, чем я сама (не удивлюсь, если он сам
напишет книгу), всегда меня поддерживал, когда приходилось много работать. Он знает, что
путь к моему сердцу лежит через поздний ужин с суши.
Также хочу поблагодарить многих клиентов и друзей, которые позволили мне использовать
в этой книге их фотографии и Web-узлы и доверили мне свою работу один, два, а иногда даже
три раза! Спасибо Деборе Натансон (Deborah Nathanson), Трейси Доминик (Tracy Dominick),
Сюзанне Берг (Suzanne Berg), Теду Гесту (Ted Gest), Катрин Лорд (Kathryn Lord), Патти Райн
(Patti Rayne) и Джею Виллису (Jay Willis).
Конечно, благодарю своих замечательных родителей, за то что они дали мне мозги, которые я могу использовать для написания книг. Также благодарю, за то что они привили мне
любовь к книгам. Итак, спасибо Яне и Филу Гарднер (Jan and Phil Gardner), моим брату и сестре Мэтту и Дебби Гарднер (Matt and Debbie Gardner), чьи блестящие идеи и сумасшедший
вид всегда были на высоте.
Жизнь, несомненно, была бы беднее без моих двух кошек, Аймии (Aimee) и Лукаска (Lukaska).
Наши частые споры по поводу, чей все-таки стол — мой или их, заставляли меня делать небольшие паузы в работе над этой книгой. Аймии особенно часто составляла мне компанию,
засыпая на мониторе, пока я писала очередную главу.

Хочу поблагодарить нескольких друзей за помощь в разъяснении технологий и за простой
здравый смысл: Ланс Ватанабе (Lance Watanabe), Джей Сунг (Jae Sung), Карвд Сунг (Karin Sung),
Элайн Зиннгрейб (Elaine Zinngrabe), Джим Сабо (Jim Sabo) и Зиппора Лаке (Zipporah Lax).
И напоследок, спасибо всем замечательным людям из Wiley, благодаря вниманию которых все слова написаны правильно, разделы названы соответствующим образом и, что самое
главное, все это находится теперь на книжных полках.
Франк. Эти благодарности очень похожи на все другие, которые я выносил ранее. Хотя
о чем это я? Я гораздо более благодарен всем людям в моем прошлом и настоящем, которые
помогли мне стать тем, кем являюсь сейчас.
Хочу поблагодарить Джанин за то, что она попросила помочь ей с этой книгой. Все эти
годы, что мы знаем друг друга, ты всегда была желанным дополнением к моей жизни. Твои
ободряющие слова и оптимизм часто подталкивали меня, когда ничего другое не помогало
(иногда ты этого даже не замечала). Джанин, спасибо тебе за то, что ты мой друг и за то, что
ты являешься именно тем человеком, каким ты есть.
Моя семья всегда была удивительной поддержкой. Спасибо моим родителям Эльзе
и Франциско Вера (Elsa and Francisco Vera) за то, что я появился на свет. Без вашей любви
я ничего бы не смог завершить до конца. Моей маленькой сестренке Диноре Вера: Ди, ты без
вопросов являешься лучшим примером того, как достичь звезд. Твоя настойчивость и, вероятно,
решительное упрямство всегда удивляли меня. Я измеряю свой успех или иногда удачу, сравнивая себя с тобой. Спасибо Ди! Моим старшим сестрам и их мужьям, Сюзи и Серджио Моралез
(Susy and Sergio Morales), и Магде и Питеру Портилла (Magda and Peter Portilla). Спасибо вам за
то, что слушали мои безумные речи и помогали мне, когда это было нужно. Моим племянникам
и их женам: Денни Портилла (Danny Portilla), Габриель Альварез (Gabriel Alvarez), а также Сенди и Фабиан Портилла (Sandy and Fabian Portilla). Благодарю вас за то, что терпели мои
"волнующие" рассказы о компьютерах. Особая благодарность женам моих племянников: спасибо вам, за то, что вы позволили вашим мужьям тратить столько времени на всякие глупости. Я люблю тебя, Мелисса Романович (Melissa Romanovicz), за то, что терпела мои глупые
отговорки, что у меня много работы. Ты так добра ко мне, и я это никогда не забуду.
И напоследок хочу поблагодарить друзей и всех тех, кто поддерживал меня все это время:
Ивонну Берковитц (Ivonne Berkowitz) (я в очередной раз одолжил у нее идею!), Генерозу Гонзалез (Generoza Gonzalez) (Tia), Норис Гернандез (Norys Hernandez), Томаса Сантану (Thomas
Santana), Адриана Пена (Adriana Репа), Вильяма Джеймса Кинга П (William James King П),
Дрю Гиллиланда (Drew Gilliland) (на этот раз я правильно написал!), Фаррелла и Яну Акерман
(Farrell and Jan Ackerman), Франциско Ривьера (Francisco Rivera), Варрена Ван Дер Вуд (Warren
Van Der Woude), Татьяну и Бернардо ДеАрауджо (Tatiana and Bernardo DeAraujo), Мануеля
Алонсо (Manuel Alonso) (старшего и младшего), Питера Шмидхоффера (Peter Schmidhoffer),
Джусто Сардиназ (Just Sardinas), Дейва Маркотта (Dave Marcotte), Робинзона Мейа (Robinson
Mejia), Рене Руиц (Rene Ruiz) и многих-многих других. Спасибо вам за то, что вы помогли
мне стать тем, кем я сейчас являюсь.

Благодарности

17

Введение
Если вы похожи на многих Web-дизайнеров, которых я знаю, то у вас нет времени читать
толстую книгу, перед тем как приступать к работе над Web-узлом. Именно по этой причине
была написана книга Dreamweaver MX 2004 для "чайников" — краткое руководство к действию. Эту книгу не обязательно читать главу за главой. Если вы торопитесь, то просто найдите
необходимую информацию и возвращайтесь к работе. Если вы новичок в Web-дизайне или
просто решили глубже разобраться в программе Dreamweaver, сначала бегло просмотрите
главы, а затем внимательно прочтите то, что касается вашего проекта. Независимо от того,
работаете вы первый раз над простым узлом либо уже в который раз изменяете дизайн сложного узла, на этих страницах вы найдете все, что вам необходимо.

Лочели/ именно 2)гешш/еаиег?
С каждой новой версией программа Dreamweaver, завоевавшая многие награды, становится все более эффективной и более мощной. Компания Macromedia продолжает выпускать
Dreamweaver интуитивно понятным и простым в использовании, несмотря на то, что программисты постоянно предлагают нововведения в Web-дизайн и выпускают новые версии
этой программы почти каждый год с момента ее создания.
Мощные средства, с одной стороны, и простота в использовании, с другой, делают
Dreamweaver идеальной программой, как для профессиональных Web-дизайнеров, так и для новичков. А новые инструменты в версии 2004 сделали Dreamweaver намного лучше, чем ранее.
Я работала с программами по Web-дизайну с момента появления на рынке в 1994 году
первой из них и хочу вас заверить, что Dreamweaver— это лучшая из них. Эту мысль подтверждают и многочисленные награды, которыми была отмечена эта программа — Best of
Show в издании Internet World, престижный рейтинг "пяти мышей" журнала Macworld и награду Best Web Authoring Tool журнала PC Magazine.
Перечислим наилучшие средства Dreamweaver.
Dreamweaver поддерживает "чистый" HTML-код, а также последние его
HTML-расширения (динамический HTML и каскадные таблицы стилей
(Cascading Style Sheets), улучшенные в версии 2004).
В Dreamweaver MX 2004 добавлен ряд полезных функций для создания Webузлов под управлением баз данных. Эти функции раньше продавались отдельно в пакете Dreamweaver UltraDev, но с выходом Dreamweaver MX 2004 мы
получили полный комплекс в одной мощной программе.

|

Как и в предыдущих версиях, в программе имеется современный текстовый редактор, который позволяет легко переключаться между Dreamweaver и текстовым редактором (если вы предпочитаете просматривать
HTML-код страниц, то найдете в этой версии программы заметные улучшения текстового редактора).

Если вы никогда раньше не писали HTML-код, не пугайтесь всех этих странных функций.
В графическом интерфейсе программы Dreamweaver используются усовершенствованные палитры и окна, позволяющие новичкам на высоком уровне создавать Web-узлы, в которых используются такие функции, как анимация, интерактивные формы и решения для электронной
коммерции, даже если вы не знакомы с HTML.

Неко&о/гые nfteqncuoMceHUSi
Компания Macromedia предполагает, что вы профессиональный разработчик. Я же так не
считаю. Даже если вы новичок в Web-дизайне, то сможете пользователей этой программой,
а данная книга поможет в ней разобраться. Придерживаясь философии серии ...для "чайников",
эта книга является простым руководством, созданным для читателей, имеющих опыт в различных областях (не только в дизайне). Она будет полезна всем, кто заинтересовался Webдизайном и кто желает создать Web-узел, ведь именно это желание от вас и требуется.
Если вы опытный Web-дизайнер, книга Dreamweaver MX 2004 для "чайников" является
для вас идеальным руководством, так как позволяет эффективно работать с этой программой
и при создании простых Web-страниц, и при использований более сложных функций. Если
вы новичок, то данное издание поможет вам приступить к работе и расскажет обо всем необходимом для создания Web-узла.

Обэ*пой книге
Основная цель книги Dreamweaver MX 2004 для "чайников" — облегчить вашу жизнь при
работе с этой программой. Не следует читать ее главу за главой и все запоминать. Напротив,
каждый раздел является самодостаточным, в нем даются ответы на конкретные вопросы
и предлагаются пошаговые инструкции по выполнению определенных задач.
Хотите узнать, как сменить цвет фона страницы, создать вложенную таблицу, построить
HTML-фреймы или разобраться в таких действительно непростых вопросах, как таблицы
стилей и слои? Просто перейдите к наиболее интересующему вас разделу* При этом вовсе не
обязательно держать все эти новые HTML-дескрипторы в памяти. В следующий раз для выполнения одной из этих задач просто вернитесь к определенному разделу и прочтите его еще
раз. И не стесняйтесь делать пометки на страницах: уверяю, они не будут против.

Условные обозначения, nfiUHSufiue € книге
Согласованность в действиях облегчает понимание. В этой книге такие согласования являются условными обозначениями. Вы обратили внимание, что слово условные набрано курсивом? Это обозначение я часто буду использовать. Новые термины отображаются курсивом,
после чего следуют их определения.
Адрес URL (Web-адрес) или адрес электронной почты будет выглядеть следующим образом: www. j a n i n e w a r n e r . com. Правда, иногда, я буду выносить URL в отдельную строку:
www.janinewarner.com
Так его легче найти на странице, если вы захотите посетить данный узел. Я также предполагаю, что в Web-браузере не нужно вводить префикс h t t p : / / для Web-адреса. Если же вы
пользуетесь старым браузером, не забывайте добавить к адресу этот префикс.
Несмотря на то, что для работы с Dreamweaver вам не понадобятся глубокие познания
в области HTML-кода, иногда все-таки придется погружаться "в воды" HTML. Поэтому я буду обозначать HTML-код следующим образом: .
J a n i e ' s Web S i t e < / A >
(Это код для создания ссылки на Web-страницу.)
При ознакомлении с наборами свойств, например, параметрами диалогового окна, эти
элементы будут отделяться маркерами абзаца, чтобы можно было точно сказать, что они
взаимосвязаны. Когда следует указать на выполнение каких-либо инструкций, будет использована пронумерованная последовательность действий.

введение

19

книги
Чтобы вам легче было изучать новую программу, книга Dreamweaver MX2004 для
"чайников" задумывалась как справочник. В следующих разделах приведен список частей
книги и их краткое содержание. В каждой главе шаг за шагом описываются свойства программы Dreamweaver, приводятся полезные советы и разъясняются термины, использующиеся в Web-дизайне.

Часть I. Осуществление мечты
В этой главе вы ознакомитесь с программой Dreamweaver и узнаете об основных ее функциях. В главе 1 описываются панели инструментов и команды меню, а также новые свойства
версии 2004. Начиная с главы 2, вы будете создавать свой первый Web-узел, а также задавать
параметры узла, импортировать существующий узел, создавать новые Web-страницы, форматировать текст, размещать изображения и устанавливать ссылки на ваши страницы.

Часть II. Выглядит на миллион (даже по смете)
Планирование дизайна Web-узла — наиболее важная часть его разработки, так как этот
этап предотвращает появление многих проблем. В главе 3 даны советы по управлению Webузлом, изложены основные принципы дизайна, представлены стратегии, которые экономят
время. Вы также ознакомитесь со свойствами управления узлом программы Dreamweaver.
Если вы работаете в команде дизайнеров, вас особенно заинтересуют как свойства регистрации и контроля для слежения за версией проекта, так и встроенная служба электронной почты для связи с другими членами команды. В главе 4 вы узнаете о некоторых замечательных
свойствах программы Dreamweaver, в том числе о возможностях создания сложных шаблонов, элементов библиотеки, трассирующих изображений, быстрого редактора дескрипторов,
заметок по дизайну и палитры истории.
В главе 5 рассказано о том, как встроить элементы Web-графики в ваши страницы, описываются средства и методы, которые помогут вам в создании новых страниц. Помимо этого,
вы узнаете, где можно найти бесплатные изображения или приобрести графику, которая уже
оптимизирована для Web.

Часть III. Улучшение узла
В части Ш вы узнаете об использовании Dreamweaver с некоторыми более сложными
HTML-свойствами. В главе 6 рассказывается о том, как использовать HTML-таблицы для
создания сложных страниц, работающих в большинстве распространенных Web-браузеров.
В этой главе речь идет о режиме Table Layout, упрощающем создание сложного Web-дизайна.
В главе 7 описан процесс разработки узла с помощью HTML-фреймов. (Вы также узнаете,
когда нужно использовать фреймы, а когда — нет. Кроме того, будут представлены пошаговые инструкции по созданию HTML-фреймов.)
В главе 8 рассматриваются каскадные таблицы стилей (Cascading Style Sheet), принципы их работы и возможности экономить ваше время. Вы найдете описание всех параметров определения
стилей, присутствующих в программе Dreamweaver и инструкции по их созданию и применению.

Часть IV. Делаем узел еще круче
Эта часть посвящена "территории" HTML. В главе 9 вы глубже ознакомитесь с такими
свойствами динамического HTML, как слои и поведения, которые позволяют управлять дизайном и новыми уровнями интерактивности.

20

Введение

В главе 10 рассказывается о Fireworks — программе, разработанной компанией Macromedia с целью создания изображений для Web, а также о преимуществах интеграции Dreamweaver с Fireworks для создания сложных картинок.
В главе 11 вы узнаете, как использовать Dreamweaver для добавления мультимедиа на Webстраницы и как присоединять к ним различные типы файлов: от Flash и Java до RealAudio.
В главе 12 рассматриваются HTML-формы и методы использования программы Dreamweaver для добавления в Web-страницы интерактивных элементов, например, поисковых систем, форумов и систем электронной коммерции.

Часть V. Работа с динамическим содержимым
В части V вы найдете три новые полезные главы, в которых обсуждаются новейшие и наиболее сложные функции программы Dreamweaver MX 2004. В главе 13 вы сможете разобраться
с принципами работы Web-узлов, которые управляются базами данных. В главе 14 научитесь
добавлять в страницы динамические элементы, определять источники данных и отображать наборы записей. И наконец, в главе 15, немного попрактиковавшись, начнете создавать шаблоны страниц, строить страницы для поиска в базах данных и тестировать вашу работу.

Часть VI. Великолепные десятки
Здесь вы найдете перечень десяти отличных Web-узлов, созданных посредством программы Dreamweaver, десять полезных идей по поводу Web-дизайна и десять советов, которые сэкономят ваше время и улучшат работу узлов, если вы применяете программу
Dreamweaver MX 2004.

Пиктограммы, которые используются в этой книге
Данная пиктограмма указывает на ценные ресурсы World Wide Web.

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

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

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

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

Введение

21

Куда двигаться дальше
Перейдите к главе 1 и начните знакомство с программой Dreamweaver. Вы найдете описание программы, с помощью которой можно быстро начать работу, а также узнаете полезные
ссылки на все новые свойства, включенные в версию MX 2004. Если вы уже знакомы
с Dreamweaver и теперь решили изучить какой-то особый прием или метод, перейдите прямо
к необходимому вам разделу. Вы не потратите ни секунды, если вас поджимают сроки. И самое главное — получайте от вашей работы удовольствие!

Жс/ел ваших
Вы, уважаемый читатель, и есть главный критик и комментатор этой книги. Мы ценим
ваше мнение и хотим знать, что было сделано нами правильно, что можно было сделать лучше и что еще вы хотели бы увидеть изданным нами. Нам интересно услышать и любые другие замечания, которые вам хотелось бы высказать в наш адрес.
Мы ждем ваших комментариев и надеемся на них. Вы можете прислать нам бумажное или
электронное письмо, либо просто посетить наш Web-сервер и оставить свои замечания там.
Одним словом, любым удобным для вас способом дайте нам знать, нравится или нет вам эта книга,
а также выскажите свое мнение о том, как сделать наши книги более интересными для вас.
Посылая письмо или сообщение, не забудьте указать название книги и ее авторов, а также
ваш обратный адрес. Мы внимательно ознакомимся с вашим мнением и обязательно учтем
его при отборе и подготовке к изданию последующих книг. Наши координаты:
E-mail:
WWW:

info@dialektika.com
http://www.dialektika.com

Информация для писем:
из России:
115419, Москва, а/я 783
из Украины:
03150, Киев, а/я 152

Часть I

Осуществление мечты

fcv.-U

,j• **.*-.

^тА^'п^Щ^

В части! вы узнаете о
которые ре&акпг ш»
ботки болеег
знакомитесь; с Dreamweav
и других среден! М к|

свойства
ват£ свою первую

Глава 1

Позвольте представить вам нового друга
главе...
>

Знакомство с новыми свойствами Dreamweaver MX

>

Изучение задач вашего Web-узла

>

Поиск путей к Dreamweaver

ббро пожаловать в удивительный мир Dreamweaver! Если вы опытный Web-дизайнер,
то вам понравится мощь и совершенство этого HTML-редактора. Если же вы новичок
в Web-дизайне, то оцените его простой и понятный интерфейс. В этой главе вы ознакомитесь
с программой Dreamweaver, рассмотрите меню и панели, которые сделали ее такой полезной.
Dreamweaver поможет вам во всех вопросах, касающихся Web-разработки, включая создание простых страниц, исправление ссылок и публикацию узла в World Wide Web. С помощью программы Dreamweaver можно работать как с простейшим HTML-кодом, так и с наиболее сложными и расширенными свойствами, встречающимися в Web-пространстве: каскадными таблицами стилей (Cascading Style Shedts) и динамическим HTML (более подробно
об этих свойствах можно узнать в главах 8 и 9). В Dreamweaver также содержится встроенный HTML-редактор с простым интерфейсом.
Если вы уже работали с другой программой для Web-дизайна, не волнуйтесь, с помощью
Dreamweaver можно изменять существующие Web-страницы, а также продолжать разработку
вашего Web-узла, не теряя, того, что уже сделано. Все программы для Web-дизайна генерируют HTML-страницы, которые можно открыть в любой другой программе для Web-дизайна.
Например, если вы работали с такими программами, как Microsoft FrontPage или Adobe
GoLive, то спокойно можете перейти к Dreamweaver для дальнейшего редактирования и разработки узла. В конце этой главы, в разделе "Работа над Web-страницами, созданными в другой программе для Web-дизайна", приведены советы, касающиеся данной темы.
В настоящей главе речь пойдет о новых свойствах программы Dreamweaver MX 2004,
а также будет описан рабочий стол. Надеемся, сможем вас убедить, что Dreamweaver —
мощная программа.

Шиие, чМо же нового появилось
в Згеами/есшег JVC 2004?
Теперь о хорошем. Все, что вы хотели бы видеть в продукте компании Macromedia, все
ваши желания (верите или нет) услышаны, теперь все инструменты, которые мы так хотели
видеть, наконец-то в наших руках!
В следующем списке приведен краткий обзор новых свойств, появившихся в версии MX 2004.

I

S

Изменения интерфейса в этой версии не такие кардинальные, как в предыдущей версии Dreamweaver MX, но они довольно полезны. Хочу сразу преду-

предить, что про плавающие панели можно забыть, и теперь единственным
возможным интерфейсом стал интерфейс, принятый в версии Dreamweaver MX. Но существует возможность выбирать между интерфейсом Designer (Дизайнер), в котором графические и функциональные панели закреплены на своем месте, и HomeSite/Coder-Style (HomeSite/Доступ к коду),
в котором (как видно из названия) открывается текстовый редактор HomeSite.
При первом запуске программы можно выбрать один из этих режимов, но ничто не мешает в любой момент изменить тип интерфейса в свойствах программы. Если вы выбрали интерфейс Designer, то можно при необходимости
сворачивать и разворачивать панели и перемещать их по экрану для создания
наиболее удобной для вас рабочей среды. В этой книге почти все рисунки
и инструкции отображают работу в интерфейсе Designer. Если вы программист
(т.е. тот, кто предпочитает работать с HTML-кодом), выберите режим Coder.
Вы найдете целый ряд отличных функций, которые смогут помочь написать
HTML-код, и в результате вам не придется вводить все дескрипторы вручную.
В новой версии программы интерфейс Designer стал более интуитивным
и простым в организации. Его довольно простоизменить по своему вкусу. Например, если вам не нравится, что панель Property Inspector находится внизу экрана, просто перетащите ее вверх, и она закрепится на своем новом месте.
Также в новой версии уменьшен размер панели Insert (Вставка), чтобы не занимать место рабочей области. И если вы хотите, чтобы часто используемые
функции были всегда под рукой, выберите из раскрывающегося списка пункт
Favorites (Избранное), щелкните правой кнопкой на панели и отыщите все
необходимые инструменты. 1
Учитывая нюансы развития Web-дизайна, компания Macromedia улучшила
поддержку каскадных таблиц стилей. Теперь не обязательно постоянно просматривать свою работу в браузере, чтобы увидеть, как все выглядит. Панели
CSS и инспекторы правил также улучшены. В них добавлены новые опции,
которые упрощают разработку страниц с использованием CSS. Более подробно об этих замечательных свойствах рассказывается в главах 8 и 9.
Dreamweaver, наконец-то, стала лучше обрабатывать содержимое документов
пакета Microsoft Office. Следует отметить, что, на мой взгляд, разработчики
довольно долго тянули с этим улучшением, но теперь можно копировать документы из Word и Excel, не теряя форматирования. В Dreamweaver также
можно создавать таблицы из электронных таблиц Excel.
При запуске Dreamweaver на экране появляется новое начальное окно. Если
у вас не открыт ни один файл, появляется это окно. В нем можно выбрать
различные форматы страницы, готовые шаблоны и стили, а также последние
открытые документы.
Небольшие вкладки в верхней части рабочей области позволяют легко переключаться между документами. В предыдущих версиях названия открытых
файлов располагались в нижней части экрана.
Независимо от языка, на котором вы говорите, благодаря полной поддержке Unicode, вы сможете работать с Dreamweaver. Даже те языки, на которые Dreamweaver не локализирован, довольно хорошо отображаются в рабочей области.
Dreamweaver является наилучшим средством Web-дизайна для разработки узлов, которые впоследствии будут просматривать с помощью различных браузеров. Dreamweaver также располагает средствами для проверки вашей рабо-

26

Часть I. Осуществление м

ты, гарантирующими удачное отображение страниц в тех браузерах, на которые вы нацелены. Более того, благодаря средству Dynamic Cross Browser
Validation (Динамическая проверка в различных браузерах), теперь эти функции работают в реальном времени. Вам остается только выбрать браузеры,
для которых создается узел, и Dreamweaver будет проверять вашу работу каждый раз при сохранении страниц.
Хотите обрезать, изменить размер или цвет изображения, не запуская графический
редактор? Теперь эти задачи можно выполнять прямо в Dreamweaver. Вы вправе
также изменять яркость и контраст. Все эти функции находятся на панели Properties Inspector, и теперь вам не нужно тратить на эти действия много времени.
В последней версии не обязательно использовать функцию Dreamweaver
Site Setup (Настройка узла) при работе с Web-узлом. Если вы предпочитаете
просто зайти на сервер и внести небольшие изменения или открыть файлы на
своем жестком диске, не указывая главной папки, то можете пропустить этот
ранее обязательный шаг.
Однако если вы решили использовать функции управления узлом, которые позволяют перемещать файлы и папки, не разрывая связей, и автоматически восстанавливать связи, если они были разорваны, придется все-таки воспользоваться функцией Site Setup. Это выполнить несложно, особенно, если воспользоваться мастером Site Setup. Более подробно об этой процедуре рассказывается в главе 2.
Если вы создаете узел с использованием ASP, вам будет приятно узнать, что для
управления сервером ASP.NET включены готовые объекты и свойства панели
Properties Inspector. Новая вкладка ASP.NET находится на панели Insert.
Коллекция новых шаблонов позволяет создавать сложный дизайн нажатием
всего одной кнопки. Шаблоны подробно описываются в главе 4.
«•"fc г™'-;,

Построение нового узла

>

Создание новых страниц

>

Создание ссылок

>

Подключение Web-узла к Internet

так, мы можем приступать к построению Web-узла. В этой главе вы узнаете, как работать с существующим Web-узлом и как создать полностью новый. Вы также ознакомитесь с основными правилами планирования своего узла и принципами работы функции задания параметров, которая позволяет программе Dreamweaver следить за изображениями,
ссылками и другими элементами узла. Во второй части главы мы перейдем к главному —
созданию страницы и добавлению изображения и текста.
Но перед тем, как начать построение или редактирование отдельных страниц, следует с
помощью соответствующих средств в Dreamweaver задать некоторые параметры. Независимо
от того, будете вы создавать новый узел или дорабатывать уже существующий, необходимо
выполнить инструкции, приведенные в следующем разделе, чтобы подготовить Dreamweaver
к управлению вашим узлом. Свойства управления узлом позволяют программе следить за его
элементами, автоматически создавать ссылки, обновлять сервер и даже управлять командой
разработчиков. А с улучшениями, появившимися в последней версии, все эти свойства стали
еще более мощными и простыми.
Можно использовать Dreamweaver и без начальной установки узла (о которой
речь пойдет в следующем разделе), но некоторые свойства (например, автоматическая проверка ссылок и Library (Библиотека), которая позволяет хранить элементы для более простой их вставки в разные части проекта) не будут работать.

визуализация (/зла
Перед тем, как перейти к созданию Web-страниц, уделите время планированию вашего
узла, обдумайте его структуру и организацию. Начните со следующих вопросов.
S

Зачем вам нужен Web-узел? (Каковы ваши цели и задачи?)

S

На какую аудиторию вы нацелены?

/

Кто будет работать на вашем узле? Сколько разработчиков планируется привлечь к созданию узла?

S

Как вы будете создавать или откуда собираетесь брать текст и изображения
для вашего узла?

Как следует организовать файлы вашего узла?
Будут ли на узле располагаться мультимедиа-файлы, — Rash или RealAudio? '
Нужны ли вам такие интерактивные функции, как форма обратной связи
и комната для бесед?
Какое дополнительное программное обеспечение вам необходимо для специальных функций (например, Macromedia Flash для анимации)?
Какая система навигация будет на вашем узле (т.е. как можно максимально
упростить перемещение пользователей по узлу)?
Как вы будете решать проблемы роста и в дальнейшем разрабатывать узел?
Если вы спланируете узел, то в дальнейшем будет легче разобраться с функциями управления, которые мы обсудим далее в этой главе. В главе 3 вы найдете более подробные советы
и указания по планированию и управлению вашего узла. Потратив вначале немного времени
на четкую постановку целей и задач, вы оградите себя от неприятностей в будущем. Настройтесь на успех в самом начале, и результат обязательно будет положительным.

Задание па/гаме/п/гов нового или
с/зла
Процесс задания параметров узла очень важен, так как после окончания работы и выгрузки
узла на Web-сервер отдельные страницы, изображения и другие элементы должны оставаться в
тех же относительных местоположениях, что и на вашем жестком диске. Средства управления
узлом в Dreamweaver разработаны так, чтобы гарантировать конкретную работу на сервере. Это
достигается путем проверки правильности ссылок и других свойств при их создании. Если вы не
используете средства управления, то рискуете разорвать связи между страницами, когда будете
выгружать узел на Web-сервер. При начальной настройке узла также задаются параметры FTPфункций программы Dreamweaver, которые облегчают перенос вашего узла с локального компьютера на Web-сервер и управляют обновлениями при внесении каких-либо изменений.
При настройке нового узла Dreamweaver автоматически создает на жестком диске новую
папку для хранения всех ваших страниц и других элементов узла. Если хотите, можете изменить местоположение папки или создать ее самостоятельно.
Если вы работаете над существующим узлом, выполните те же действия, но не создавайте
новую папку, а укажите программе ту, в которой находится существующий узел.
Если вы опытный Web-дизайнер и просто хотите внести небольшие изменения
или воспользоваться FTP-свойствами, чтобы добраться до файлов на сервере,
и при этом не задавать параметры узла, то теперь Dreamweaver позволит вам сделать
это, не завершая процесс настройки узла. Чтобы воспользоваться FTP-свойствами
и быстро их настроить, выберите Site 1 ^ Manage Sites (Узел^Управление узлами),
а затем в диалоговом окне Manage Sites выполните команду New=>FTP&RDS Server.
Этот ярлык позволит вам напрямую работать с вашим сервером посредством FTP
и RDS, правда, при этом Dreamweaver не будет проверять целостность ссылок
и использовать другие функции управления узлом.
Если вы не настолько опытный Web-дизайнер или если вы работаете над узлом,
который полностью находится на вашем компьютере, потратьте еще три минуты
и выполните следующие действия по заданию параметров узла. Поверьте, это
время будет потрачено не зря.

46

Часть I. Осуществление ме

Определение узла
Следующие действия основываются на использовании диалогового окна Site Definition
(Задание узла) для определения узла. Этот этап в Web-дизайне довольно важен, так как
он определяет структуру узла,* позволяющую редактору Dreamweaver устанавливать
ссылки и эффективно использовать многие функции управления узлом, которые описываются в последующих главах.
Если вы работаете с существующим узлом, находящимся на удаленном сервере,
выполните действия указанные в разделе "Загрузка существующего Web-узла".

Чтобы определить узел с помощью диалогового окна Site Definition, выполните следующие действия.
1. Выберите команду Site^Manage Sites.
Появится диалоговое окно Site Definition, изображенное на рис. 2.1.
2. Щелкните на кнопке New (Создать), а затем выберите команду Site (Узел).
Появится диалоговое окно Site Definition for Your Dream Site, изображенное на рис. 2.2.
3. Выберите вкладку Advanced (Дополнительные параметры).
Появится окно Advanced. Если хотите, воспользуйтесь запустившимся мастером, но
более точно управлять свойствами можно из вкладки Advanced.
4. Убедитесь, что в левой ее части выбрана категория Local Info (Локальные данные).
5. В текстовом поле Site Name (Имя узла) введите название вашего узла.
Можете назвать узел любым именем. Оно используется только для того, чтобы вы
могли отличить один узел от другого. Многие работают в Dreamweaver сразу над несколькими узлами, поэтому в программе предусмотрен способ присвоения им имен.
После того, как это будет сделано, в раскрывающемся списке диалогового окна Site
появится название. Указанный список используется для выбора узла, с которым вы хотите работать при открытии Dreamweaver, что особенно полезно, если вы работаете
сразу над несколькими Web-узлами.
6. Воспользуйтесь кнопкой Browse (Обзор) (она изображена в виде папки для документов), которая расположена напротив текстового поля Local Root Folder (Корневая
локальная папка), чтобы указать новую папку на
жестком диске (ее вы создали в первом действии)
Manaqe Sites
для хранения Web-узла.
Если вы работаете с существующим узлом, выполните те же действия, чтобы выбрать папку с узлом, над
которым вы будете работать в Dreamweaver.
7. Если функция Refresh Local File List Automatically (Автоматически обновлять список локальных файлов) не выбрана, установите соответствующий флажок. После этого Dreamweaver автоматически обновит список новыми страницами,
которые будут добавляться к узлу.
Рис. 2.1. Диалоговое окно Site
Это свойство помогает Dreamweaver более эффек- Definition позволяет в Dreamтивно работать, так как ускоряется процесс поиска weaver установить новый или сущеи идентификации файлов узла.
ствующий узел

Глава 2. Задание параметров Web-узла в Dreamweaver

47

Рис. 2.2. В диалоговом окне Site Definition for Your Dream Site
определяется информация для нового или существующего узла
8. Укажите папку Default Images (Стандартные изображения), введя путь к ней,
или воспользуйтесь кнопкой обзора, чтобы найти ее.
Вам не обязательно указывать папку для изображений. Если вы храните их в более чем
одной папке или у вас пока вообще нет никаких изображений, можете оставить это
поле незаполненным. (Более подробно об изображениях рассказано в главе 5.)
9. В текстовом поле HTTP Address (Адрес HTTP) введите адрес URL своего Web-узла.
Адрес HTTP — это URL (или Web-адрес), который будет иметь ваш узел после его
размещения на Web-сервере. Если вы еще не определились, какой Web-адрес будет
иметь ваш узел, или если вы не планируете размещать его на Web-сервере, то оставьте
это поле незаполненным.
10. Установите флажок Enable Cache (Включить кэш).
Dreamweaver создаст локальный кэш вашего узла, чтобы ускорить отображение его
файлов. Локальный кэш ускоряет работу многих функций управления узлом, а на его
создание потребуется всего несколько секунд, если, конечно, у вас не слишком большой узел или не очень медленный компьютер.
11. Щелкните на кнопке О К, чтобы закрыть диалоговое окно Site Definition.
Если вы не установили флажок Enable Cache, появится окно, в котором программа
спросит у вас, хотите ли вы создать кэш для узла. На рис. 2.1 показано, как должно выглядеть диалоговое окно Site Definition, когда заполнены все поля вкладки local Info.

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

48

Часть I. Осуществление м

Информация о Web-сервере, который будет использоваться для размещения вашего узла,
вводится на странице Remote Info (Данные удаленного узла) диалогового окна Site Definition.
Эту страницу можно выбрать в поле Category (Категория) в левой части окна, а-сама она откроется в правой его части, как показано на рис. 2.3.

Testing Server
Cloaking
Notes
Site Map Layout
View Columns
ContrbUte

FTP

Ш
ftp.dreamslte.com
users/web/dreamsite/
dreamy

Рис. 2.3. В диалоговом окне Site Definition определяется информация
для доступа к удаленному Web-серверу
В разделе Remote Info раскрывающегося списка Access (Доступ) вы найдете несколько опций. В следующем разделе приведены инструкции по настройке FTP-доступа. Если вы не планируете публиковать свой узел на сервере, выберите опцию None (Нет) в раскрывающемся списке Access вкладки Remote Info. В случае, если узел предполагается отправить на сервер, расположенный в сети, выберите в том же раскрывающемся списке опцию Local/Network
(Локальный/Сетевой), после чего воспользуйтесь кнопкой Browse — таким образом, вы укажете местоположение сервера в вашей сети. Другие две опции, RDS, SourceSafe Database (База
данных SourceSafe) и WebDAV, включают систему управления версией и помогают следить за
внесенными изменениями, когда команда разработчиков работает над узлом.
Чаще всего для публикации разработанного Web-узла применяется протокол FTP, позволяющий отправить узел на удаленный сервер, например, один из тех, которые предоставляются коммерческими поставщиками услуг Internet. Если вы собираетесь поступить именно
так, выполните следующие действия.
При использовании удаленного сервера (например, поставщика услуг Internet) потребуется узнать у поставщика следующую информацию.
Имя хоста FTP.
Путь к каталогу хоста.
Имя пользователя.
Пароль.

Глава 2. Задание параметров Web-узла в Dreamweaver

49

Выберите опцию FTP в раскрывающемся списке Access на странице Remote Info диалогового окна Site Definition и выполите следующие действия.
1. В текстовом поле FTP Host (Имя хоста FTP) введите имя хоста вашего Web-сервера.
Оно должно иметь следующий вид: f t p . h o s t . c o m , s h e l l . h o s t . c o m или
www.host.com — в зависимости от сервера.
2. В текстовом поле Host Directory (Каталог хоста) введите каталог удаленного узла,
в котором хранятся общедоступные документы (его также называют корнем узла).
Указанный каталог должен быть представлен следующим образом: p u b l i c / h t m l /
или www/public /docs/, что зависит от вашего сервера.
3. В текстовых полях Login и Password введите, соответственно, регистрационное
имя и пароль, необходимые для доступа к Web-серверу. Если вы установите
флажок Save (Сохранить), то Dreamweaver сохранит эту информацию и автоматически будет ее использовать при подключении к удаленному узлу.
Это уникальные регистрационное имя и пароль, которые необходимы для предоставления вам доступа к серверу.
4. Установите флажки Use Passive FTP (Пассивный FTP) или Use Firewall
(Использовать брандмауэр), но только в том случае, если поставщик услуг или
администратор узла указали вам на обязательность этих действий.
Если вы не в сети и пользуетесь услугами коммерческого поставщика, то эти опции
включать не обязательно.
5. Если вы не планируете проверять остальные настройки, щелкните на кнопке ОК,
чтобы сохранить информацию о Web-сервере, после этого закройте диалоговое
окно Site Definition.
Чтобы продолжить просмотр настроек других категорий, выберите в окне Category с левой
стороны экрана Testing Server (Сервер тестирования), Design Notes (Заметки по дизайну), Site Map Layout (Макет карты узла), File View Columns (Просмотр файла) или
Contribute (Содействие). (Некоторые из этих настроек описаны в следующих разделах.)
Если вы готовы перейти к созданию своих первых страниц, то эти опции изменять не
обязательно. Просто перейдите к разделу "Создание новых страниц" и начните создавать свой Web-узел.

Использование Check In/Out
Категория Check In/Out (Передать на/с) разработана с целью не допустить в процессе создания Web-узла перезаписывание сотрудниками результатов работы друг друга (очень ценное
свойство, если вы хотите сохранить мир и спокойствие в команде Web-дизайнеров). После того,
как один человек, создающий Web-узел, взял файл с удаленного сервера, другие разработчики
этого узла не смогут внести изменения в этот файл. Когда вы извлекаете файл, напротив его
имени появляется зеленая галочка. Если файл забрал кто-то другой, вы увидите красную галочку.
Чтобы воспользоваться свойством Check In/Out, установите флажок в окне напротив поля Check In/Out в нижней части окна Remote Info. После этого секция расширится и откроет
вам дополнительные опции. Если необходимо, чтобы файлы отмечались как выбывшие при
их открытии, установите флажок Check Out Files When Opening (Отмечать открытые файлы как выбывшие), как показано на рис. 2.4.
С помощью этого свойства можно следить за тем, с какими файлами работает определенный человек. Если вы единственный, кто участвует в разработке Web-узла, то эта функция
вам не понадобится. Однако если вам необходимо воспользоваться механизмом слежения,

50

Часть /. Осуществление меч

установите флажок Check Out Files When Opening и впишите в поле Check Out Name
(Имя для выбывших файлов) имя, по которому вы будете определять файлы (это может быть
ваше имя, прозвище и т.д.). Также укажите адрес электронной почты в поле Email Address.
(Поле Email Address используется для интеграции Dreamweaver с электронной почтой, что
облегчает общение между разработчиками узла. Более подробная информация о встроенной
электронной почте изложена в главе 4.)

Рис. 2.4. Свойство Check In/Out помогает следить за разработкой,
когда несколько человек выполняют это задание

Использование сервера тестирования
Опция Testing Server позволяет определить сервер разработки при создании Web-узла, связанного с базой данных. (Более подробно об этом рассказывается в главах 13-15.) Если ваш узел
не подключен к базе данных, никаких изменений в это диалоговое окно вносить не потребуется.

Использование заметок по дизайну
Если вы иногда забываете подробности работы или возникают трудности при передаче
коллегам важной информации о разрабатываемом Web-узле, свойство Dreamweaver Design
Notes (Заметки по дизайну) поможет вам избавиться от этих неприятностей.
Функция Design Notes позволяет записывать информацию и привязывать ее к файлу или
папке. Она работает почти так же, как и HTML-дескриптор комментария, позволяющий добавлять не отображаемый в браузере текст на страницу и таким образом делать заметки непосредственно в коде. Теперь в Design Notes вы вправе добавить комментарии к любому элементу, включая изображения, мультимедиа-файлы и даже папки. В отличие от дескриптора
комментария, который вставляется в HTML-код страницы, заметки по дизайну не будут отображаться даже при просмотре исходного кода Web-узла. Можно выгрузить заметки на сервер, чтобы они были доступны другим пользователям, а можно сделать так, чтобы эта информация не загружалась на публичный узел.

Глава 2. Задание параметров Web-узла в Dreamweaver

51

Чтобы открыть страницу Design Notes, выберите Design Notes в поле Category диалогового окна Site Definition (рис. 2.5). Параметры на этой странице позволяют управлять обработкой Dreamweaver заметок по дизайну.

Рис. 2.5. На странице Design Notes можно определить, будут заметки
отправлены вместе с файлами на Web-сервер или нет
Maintain Design Notes (Включить использование заметок по дизайну).
Установите этот флажок, чтобы заметки присоединялись к файлу при его выгрузке на сервер, копировании и перемещении.
Upload Design Notes for Sharing (Выгрузить заметки по дизайну для
совместного использования). Выберите эту опцию, чтобы включить заметки
при отправке файлов на сервер по протоколу FTP.
Clean Up (Очистка). Эта кнопка позволяет удалить заметки по дизайну, которые не прикреплены ни к какому из файлов или папок узла.
При создании графического изображения в программе Macromedia Fireworks
можно сохранить заметки для этого файла, причем они также будут видны
в Dreamweaver. Чтобы воспользоваться этим встроенным свойством, сохраните
Fireworks-изображение в локальной папке Web-узла. Затем, когда вы откроете
файл в Dreamweaver, щелкните на изображении правой кнопкой мыши — появится заметка по дизайну. Это свойство является эффективным методом общения
графических дизайнеров с другими членами команды Web-разработчиков.

Активизация макета карты узла
Если вам сложно уследить за всеми файлами и ссылками своего узла, не расстраивайтесь — вы не одиноки. Увеличение размеров Web-узлов делает эту задачу практически невыполнимой. Но в Dreamweaver существует средство Site Map Layout (Макет карты узла), ко-

52

Насть I. Осуществление м

торое помогает следить за Web-страницами и иерархией вашего узла. Это не та карта, которую часто можно увидеть на Web-узлах, со ссылками на многие или даже на все страницы.
В Dreamweaver Site Map Layout — это функция управления, с помощью которой можно визуально управлять файлами и папками, из которых состоит ваш узел.
Чтобы выполнить ее настройку, выберите Site Map Layout в поле Category диалогового окна
Site Definition. Страница Site Map Layout откроется в правой части окна, как показано на рис. 2.6.

Рис. 2.6. На странице Site Map Layout можно выбрать способ отображения карты узла
Это свойство используется для автоматического создания карты узла со всеми его
страницами. Такое средство управления предоставляет визуальное изображение иерархии Web-узла и всех его ссылок и поэтому оказывается довольно полезным. Эту карту
можно использовать для организации вашего узла в соответствии с начальным планом,
который вы наметили перед созданием страниц. (Более подробно о планировании
рассказывается в разделе "Визуализация узла" ранее в этой главе, а также в главе 3.)
Чтобы создать карту узла на странице Site Map Layout диалогового ркна Site Definition,
выполните следующие действия.
1. Выберите в диалоговом окне Site Definition пункт Site Map Layout из списка

Category.

Если окно еще не открыто, откройте его, выбрав Site1^ Manage Sites, а затем дважды
щелкните на названии узла, с которым хотите работать в диалоговом окне Manage Sites.
2. В текстовом поле Home Page (Домашняя страница) введите путь к главной странице вашего узла или воспользуйтесь кнопкой Browse (Обзор) (изображенной
в виде папки для документов), чтобы найти ее. Если вы устанавливали параметры страницы Local Info, то это поле должно автоматически заполниться.
В указанном текстовом поле определяется домашняя страница для карты узла. В результате Dreamweaver будет знать, где начинается Web-узел. Если не определить

Глава 2. Задание параметров Web-узла в Dreamweaver

S3

домашнюю страницу, Dreamweaver не найдет файл под названием i n d e x . h t m l или
i n d e x . htm (наиболее часто используемые названия домашних страниц) и попросит
вас выбрать домашнюю страницу при открытии карты узла.
3. Укажите в поле Number of Columns (Число столбцов) количество страниц, отображаемых в одной строке карты узла.
Если вы не уверены, какое число ввести, оставьте значение по умолчанию. Вы всегда
сможете позднее вернуться и изменить данный параметр, если вам не понравится расположение пиктограмм карты узла.
4. Заполните поле Column Width (Ширина столбца) значением в пикселях, которое
будет представлять ширину карты узла.
Опять же, если вы не уверены, какое значение следует ввести, оставьте то, которое
предлагается по умолчанию.
5. В разделе Icon Labels (Метки пиктограмм) выберите опцию File Names (Имена
файлов) или Page Titles (Названия страниц), если на карте узла должны отображаться, соответственно, либо имена файлов, либо названия страниц.
Можно вручную изменить любое имя файла или название страницы после создания
карты узла.
6. В разделе Option (Опции) вы вправе скрыть определенные файлы. Это означает,
что их не будет видно в окне Site Map.
Если выбрать опцию Display Files Marked as Hidden (Отображать файлы, помеченные как скрытые), то скрытые файлы будут показаны на карте узла курсивом.
Если вы выберете опцию Display Dependent Files (Отображать зависимые файлы), будут
показаны все зависимые файлы в иерархии узла. Зависимый файл — это либо изображение,
либо другой не HTML-объект, который браузер загружает при показе главной страницы.
7. Щелкните на кнопке ОК.
Появится окно сообщения, в котором программа спросит, хотите ли вы создать кэшфайл для узла. Такой файл помогает редактору Dreamweaver обновлять ссылки и увеличивает производительность карты узла.
8. Щелкните на кнопке Generate (Создать) с целью создать кэш-файл и запустить
процесс построения карты узла.
Dreamweaver просканирует все файлы узла и создаст кэш, ускоряющий работу
программы.
9. После завершения щелкните на кнопке Done в диалоговом окне Manage Sites.
10. Чтобы просмотреть карту узла, выберите пиктограмму Expand/Col lapse
(Развернуть/Свернуть) в правой части панели Site (Узел). Затем перейдите
к пиктограмме Site Map в верхнем левом углу развернувшегося окна и Map
Only — в раскрывающемся меню.
Также можно выбрать отображение карты узла в левой части экрана и список файлов — в правой, как показано на рис. 2.7.

Загрузка существующего Web-узла
Если вы работаете с существующим Web-узлом, но у вас еще нет его копии на жестком
диске локального компьютера, воспользуйтесь программой Dreamweaver для загрузки какойто части или всего узла. После этого можно будет редактировать существующие страницы,
добавлять новые или использовать другие свойства Dreamweaver.

54

Часть I. Осуществление ме

Tabe
ls examp
e
ls
vd
ieocp
fis

*

biography.html
broadcast.html
broadcastbto....
buy .html
conwdy.html
flash.htmi
flashtobe.htm!
flashx.htmi
html2.html

Ш

ndexex.html

Щ..
£
Ш
Ш
&
Ш

logo.htm
maJnmovie.html
maritynONthe...
тагИугясгеат...
marlanhands.jpg
medra.html

«S
Ш

l l .rwrtf.jpg
§3 mcivvomanp
.jg
Ш newface.gf
la Newlogo.jpg

Рис. 2.7. Карта узла отображает расположение страниц и ссылок в структуре вашего узла
Чтобы загрузить существующий Web-узел, выполните следующие действия.
1. Создайте на вашем компьютере новую папку, в которой будет храниться существующий узел.
2. С помощью свойств настройки узла, описанных в разделе "Определение узла"
ранее в этой главе, определите ее как корневую, локальную папку.
3. Введите параметры в диалоговом окне Remote Info, как было описано в разделе
"Задание параметров доступа к Web-серверу" ранее в этой главе.
4. Подключитесь к удаленному узлу, щелкнув на кнопке Connect to Remote Host
(Подключиться к удаленному хосту) во вкладке Site (которая находится на панели Files в правой части рабочей области Dreamweaver).
5. Щелкните на кнопке Get Files (Получить файлы) в виде стрелки вниз, чтобы загрузить весь узел на локальный диск.
Если требуется загрузить с узла только определенные файлы или папки, выберите их
в панели Remote окна Site и щелкните на кнопке Get File(s) (Получить файл(ы)). Dreamweaver автоматически продублирует какую-то часть или всю структуру удаленного узла,
указав его папки без файлов. (Это необходимо для размещения загруженного файла в правильную часть иерархии узла.) Воссоздать структуру каталогов на локальном компьютере
довольно важно, так как программа Dreamweaver должна обладать информацией о размещении файлов и об отношении их к другим частям узла (чтобы правильно устанавливать ссылки). Безопаснее всего, конечно, загрузить весь узел, но, если вы работаете
действительно над огромным Web-проектом, загрузка только его части и дублирование структуры позволит работать над разделом узла, не загружая его полностью.

Глава Z Задание параметров Web-узла в Dreamweaver

55

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

Создание новых ап^аниц
Каждый Web-узел начинается с одной страницы. Именно с этой основной (или домашней
страницы) вашего узла мы и начнем. В Dreamweaver все просто: при запуске открывается начальный экран со ссылками на многие полезные функции для создания новой страницы. Если вы хотите создать простую Web-страницу, выберите в среднем столбце Create New (рис. 2.8) элемент
HTML. Если вы создаете динамический узел, можете выбрать ColdFusion, PHP или одну из
ASP-опций. (Если вы не знаете, что это такое, то скорее всего, вам эти опции и не понадобятся.)
Чтобы создать еще одну страницу, просто выберите команду File^New, элемент Basic
Page из списка категорий и элемент HTML из списка Basic page. В диалоговом окне New
Document (Создать документ) находится достаточно много других опций, но пока они останутся за пределами нашего внимания. В этой главе ограничимся лишь созданием простого
HTML-файла. Об остальных опциях вы узнаете из главы 4.
Создавая новую страницу для Web-узла, необходимо учитывать также следующее:
прежде, чем начать разработку, зачастую требуется создать несколько страниц
и даже распределить их по подкаталогам еще до размещения информации. Это позволяет организовать страницы перед тем, как создавать ссылки. Как бы то ни было, вы не сможете создать ссылку на несуществующую страницу. Таким образом,
если вы планируете разместить на главной странице пять ссылок на другие документы вашего узла, то необходимо создать эти документы, даже если они пусты.
Когда я начинаю строить Web-узел, то часто создаю несколько страниц, на которых ничего, кроме текстового заголовка сверху, не находится. Такие страницы я создаю для каждой
области моего узла и размещаю их по подкаталогам. Например, если создается узел департамента большой компании, необходимо, чтобы одна страница была посвящена сотрудникам,
другая — их работе и третья — продукции. На этом начальном этапе я создаю четыре страницы: одну — для главной страницы узла и три оставшиеся — для каждого из подразделов.
После размещения этих страниц я смогу построить начальный план организации узла и создать ссылки на главной странице. В главе 3 приведены советы по планированию и организации Web-узла. В главе 4 речь идет об использовании шаблонов, которые помогают разрабатывать страницы с одинаковым дизайном.

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

56

Часть /. Осуществление м

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

Создание заголовка
Предположим, что требуется поместить заголовок по центру страницы, сделать его большим и полужирным (так, как показано на рис. 2.9). Чтобы создать новую страницу в Dreamweaver, выберите команду File^New, затем — элемент Basic Page из списка категорий и элемент HTML из списка Basic page. Чтобы создать заголовок, выполните следующие действия.

Bold Headlines Tell Bold Stories Better]

Рис. 2Л На панели Properties Inspector расположены часто используемые свойст
вания - выравнивание и установка размера шрифта
1. Выделите текст, который следует отформатировать.
2. На панели Properties Inspector внизу страницы щелкните на пиктограмме В,
чтобы сделать выделенный текст полужирным.
Заголовок станет жирным.
3. На панели Properties Inspector внизу страницы щелкните на пиктограмме Center.
Текст автоматически будет отцентрирован.
4. На панели Properties Inspector выберите 36 в раскрывающемся списке Size
(Размер).
Текст увеличится до 36 размера (рис. 2.9).

Глава 2. Задание параметров Web-узла в Dreamweaver

S7

Для простого форматирования текста легче всего пользоваться панелью Properties Inspector, но вы можете обратиться к раскрывающимся меню из строки меню. Оба этих способа приводят к одним и тем же результатам, но в Dreamweaver
теперь используются размеры шрифтов на панели Properties Inspector, которые
больше напоминают размеры в текстовых редакторах. Обратите внимание, что на
панели Properties Inspector размер шрифта может быть от 9 до 36.

Управление отступами
Наберите еще какой-нибудь текст после заголовка. Одного предложения будет достаточно. Чтобы увеличить отступ, выполните следующие действия.
1. Выделите текст, отступ которого требуется увеличить.
2. Выберите команду Text=>lndent (ТекстаУвеличить отступ).
Отступ текста автоматически увеличится. Также можно использовать пиктограммы
Text Indent (Увеличить отступ) и Text Outdent (Уменьшить отступ) на панели Properties Inspector.
Если вы хотите продолжить набор текста без отступа, выполните команду Text1^
Outdent, чтобы вернуться к обычному тексту без отступа. Для этого также можно
использовать пиктограммы Indent и Qutdent на панели Properties Inspector слева
от поля Target (Цель).
Если следует отодвинуть только одну или две строки, опция Indent в меню Text подходит
для этого идеально. Однако если требуется создать эффект узкой колонки текста на странице,
лучше поместить его в HTML-таблицу, так как в этом случае можно будет изменять ширину
колонки. Информация о создании HTML-таблиц представлена в главе 6.

Добавление изображений
Добавить изображение к Web-странице в редакторе Dreamweaver довольно просто. Гораздо сложнее создать красивую картинку, которая будет быстро загружаться в браузере пользователя. Для создания и редактирования таких изображений вам понадобится дополнительная
программа, например Photoshop или Fireworks. А чтобы вставить изображения на страницу,
воспользуйтесь Dreamweaver. Более подробная информация о поиске и создании изображений, а также о том, как уменьшить их размер, изложена в главе 5. Предположим, что у вас
уже есть GIF- или JPEG-картинка. Рассмотрим способ ее подключения к странице. (На Webстранице можно использовать только эти два^формата: GIF и JPEG, или сокращенно — JPG.)
В Web-пространстве также поддерживается формат изображения PNG, но Webдизайнеры редко к нему обращаются, так как многие браузеры его не поддерживают.

Прежде, чем вставить изображение, выполните следующие действия. Во-первых, сохраните HTML-страницу в папке Web-узла вашего жесткого диска. Это очень важно, так как
Dreamweaver не может корректно создать ссылку на изображение, пока не определит относительное местоположение HTML-страницы и картинки. Пока вы не сохраните страницу,
Dreamweaver не будет знать, в какой папке та находится.
Именно по этой причине следует убедиться, что файл с изображением располагается
именно там, где он должен храниться на Web-узле. Многие дизайнеры создают папку под названием images, где и сохраняют все файлы с изображениями. Если вы работаете над очень

58

Часть I. Осуществление

большим узлом, то можете создать каталог с картинками в каждой главной его папке. Важно
не забывать о следующем: если переместить страницу или изображение в другую папку после
размещения картинки на странице, то можно разорвать связь между ними. Поэтому при просмотре страницы в браузере на месте изображения появится уродливая пиктограмма с разорванным изображением. Правда, если перемещать файлы или папки внутри панели Site редактора Dreamweaver, то он автоматически обновит связи, но если сделать это за пределами
программы, связь будет прервана. Если по какой-то причине ссылка на изображение оказалась прерванной, просто щелкните на пиктограмме с разорванной картинкой и воспользуйтесь пиктограммой Browse (Обзор), чтобы найти необходимое изображение.
Для размещения изображения на Web-странице выполните следующие действия.
1. Щелкните на пиктограмме Image (Изображение), находящейся на вкладке
Common (Общие) панели Insert (Вставка) в верхней части рабочей области.
(Подсказка: она выглядит как маленькое дерево).
Откроется диалоговое окно Image.
2. Щелкните на кнопке Select (Выбрать).
Будет открыто диалоговое окно с файлами и папками вашего жесткого диска.
3. Перейдите к той папке, в которой содержится требуемое изображение.
4. Дважды щелкните на выбранном изображении.
Изображение автоматически появится на вашем Web-узле.
Если вы еще не сохранили свою страницу, появится окно с предупреждением о том,
что Dreamweaver не может корректно установить ссылку на изображение, пока вы не
сохраните страницу. Предупреждение появляется в связи с тем, что программе для
создания связи нужно знать относительное местоположение HTML-страницы по отношению к изображению. Итак, если возникло предупреждение, отмените действие,
сохраните свою страницу, выбрав команду File^Save (Файл^Сохранить), и повторите предыдущие действия. Аналогично, если изображение находится не в назначенной корневой папке, появится диалоговое окно, в котором программа спросит, хотите
ли вы скопировать изображение в эту папку. Если вы решите, что Dreamweaver должна это сделать автоматически, щелкните на кнопке Yes (Да) (это гарантирует, что
изображение корректно будет перемещено на ваш сервер при выгрузке на него узла).
5. Щелкните на изображении, которое появилось на Web-странице, чтобы увидеть его опции на панели Properties Inspector внизу страницы.
Воспользуйтесь панелью Image Properties Inspector для определения атрибутов
изображения: выравнивания, горизонтального и вертикального интервала, альтернативного текста. (Свойства изображения представлены на панели Properties
Inspector на рис. 2.10.)

Рис. 2.10. Ha панели Image Properties Inspector можно установить общие атрибуты изображ
ния, например выравнивание и интервалы

Глава 2. Задание параметров Web-узла в Dreamweaver

SB

Панель Properties Inspector позволяет определить большое количество атрибутов изображений, использующихся на Web-узле. В табл. 2.1 приведены эти атрибуты. Если вы не видите все перечисленные свойства, щелкните на треугольнике,
расположенном в правом нижнем углу панели Properties Inspector, чтобы открыть все опции изображения.
Несмотря на то, что можно изменить размер изображения прямо в Dreamweaver,
перетаскивая края или изменяя значения параметров Height (Высота) и Width
(Ширина), это делать не рекомендуется, так как в результате изменяются не физические размеры изображения, а способ его отображения. При использовании самого Dreamweaver для изменения размера картинки можно исказить ее, использовать
больший, чем требуется, размер и/или ухудшить ее качество.
Предпочтительнее для изменения физических размеров изображения использовать графический редактор. По причине того, что чаще всего так и поступают, в последней версии
Dreamweaver встроено несколько ярлыков, которые позволяют использовать возможности
редактирования изображений программы Fireworks, не покидая Dreamweaver. Эти опции появляются на панели Properties Inspector при выборе изображения. Новые функции редактирования изображений описываются в главе 5.

Таблица 2.1. Атрибуты изображения
Сокращение

Атрибут

Image
Нет
Image Name
Имя
(Имя изображения)
Hotspot tools
Координаты карты
(Средства Hotspot) изображения
W
H
Src
Link
Alt

Edit (Правка)

60

Функция
Определяет размер файла
Определяет изображение в сценариях

Воспользуйтесь пиктограммами Rectangle (Прямоугольник),
Oval (Овал) и Polygon (Многоугольник) для создания карты
изображения. (В главе 5 более подробно обсуждается создание
карт изображений)
Dreamweaver автоматически определяет ширину изображения на
Width (Ширина)
основе реального размера
Height (Высота)
Dreamweaver автоматически определяет высоту изображения на
основе реального размера
*
Source (Источник) Источник — это ссылка или имя файла с путем к изображению.
Dreamweaver автоматически его устанавливает при вставке
изображения
В этом поле указывается адрес или путь, если изображение
Hyperlink
(Гиперссылка)
ссылается на другую страницу. (Подробнее о ссылках
рассказывается в разделе "Создание ссылок" далее в этой главе)
Альтернативный
Слова, введенные в этом поле, будут отображаться, если изображение
текст
не появится на экране пользователя по причине того, что отключен
показ изображений либо нет возможности их увидеть. Специальные
браузеры для слепых используют этот текст и преобразуют его
в речь с помощью специальных программ считывания с экрана
Нет
Кнопка Edit может применяться для запуска графического
редактора, например Fireworks, но вначале следует указать
в диалоговом окне Preferences (Настройки), какой редактор
вы будете использовать. Для этого выберите EditPreferences,
а затем щелкните на категории File Types/Editors
(Типы файлов/Редакторы)
.____

Часть /. Осуществление м

Окончание табл. 2.1

Сокращение

Атрибут

Функция
Reset Size
Нет
Кнопка Reset Size позволяет автоматически вернуться к реальному
размеру изображения. Это удобно, если вы изменили размер,
(Сбросить размер)
перетаскивая его края, а затем решили восстановить все обратно
Map
Имя карты
Воспользуйтесь текстовым полем Map для того, чтобы назначить
имя карте изображения. Все карты изображений должны иметь имя
V Space
Вертикальный
Измеряется в пикселях. Этот параметр вставляет пустой интервал
интервал
над и под изображением
Н Space
Горизонтальный Измеряется в пикселях. Этот параметр добавляет пустой
интервал
интервал слева исправа от изображения
Target
Цель ссылки
Данная опция используется, когда изображение появляется на
странице, являющейся частью набора HTML-фреймов. В параметре
Target определяется фрейм, в котором присоединенное
изображение должно открыться. (Создание фреймов и установка
к ним ссылок обсуждается в главе 7)
Low Src
Нижний источник Эта опция позволяет подключить два изображения к одному и тому
же месту на странице. Вначале загружается нижнее изображение,
а затем оно заменяется основным. Данная опция особенно
полезна при наличии изображения большого размера, так как
можно установить меньшую по размеру картинку (например,
черно-белую) в качестве нижнего источника. Эта картинка будет
выводиться на экран, пока загружается основное изображение.
С помощью такой комбинации двух изображений также можно
создавать иллюзию простой анимации
Border
Граница
Атрибут, измеряющийся в пикселях и позволяющий добавить
изображения
границу вокруг изображения. Чаще всего устанавливают этот
параметр в 0 (ноль), чтобы избавиться от закрашенной границы,
автоматически появляющейся вокруг подключенного изображения
Align
Выравнивание
Эта опция позволяет выравнивать изображение. Текст автоматически
описывается вокруг картинки, когда она выровнена по левому или
правому краю. Также существуют и другие опции, в том числе
Baseline (Снизу), Тор (Сверху) и Middle (По центру), управляющие
тем, как текст или другие элементы размещаются вокруг изображения

ание ссылок
Dreamweaver действительно кажется мечтой, когда дело доходит до создания ссылок. Запомните главное: ссылка— это, по существу, адрес (URL), который сообщает браузеру пользователя,
к какой странице следует перейти, если щелкнули по тексту или изображению со ссылкой.
Если эта страница находится в рамках вашего Web-узла, то лучше создать относительную
ссылку, в которой указывается путь от текущей страницы к странице, на которую создана
ссылка. При этом в ней не обязательно указывать имя домена сервера. Пример кода для создания относительной ссылки приведен ниже:
T h e b o s s < / A >
Если же требуется переходить на страницу другого Web-узла, то в этом случае создается
абсолютная ссылка. В нее включается полный Internet-адрес другого узла. Далее приведен
пример кода, скрывающегося за абсолютной ссылкой:

Janine's Books

Глава 2. Задание параметров Web-узла в Dreamweaver

61

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

Подключение страниц в рамках одного Web-узла
Подключение одной страницы вашего Web-узла к другой, или, другими словами, создание внутренней ссылки, выполнить несложно. Самое главное заключается в следующем: еще до создания ссылки не забудьте сохранить свои страницы в соответствующих
папках и убедитесь, что все файлы находятся в корневом каталоге, как было описано
в разделе "Определение узла" выше в этой главе.
Далее описан алгоритм создания внутренней ссылки.
1. Откройте в Dreamweaver страницу, на которой требуется создать ссылку.
2. Выберите текст или изображение, которое будет служить в качестве ссылки (т.е. текст
или изображение, щелкнув на которых, пользователь прейдет на другую страницу).
Также можно просто дважды щелкнуть на изображении или тексте, чтобы выбрать его.
3. Щелкните на пиктограмме в виде папки справа от текстового поля Link
(Ссылка) панели Property Inspector.
Откроется диалоговое окно Select File (Выбрать файл).
4. В диалоговом окне Select File щелкните на странице, к которой будет подключено изображение или текст, а затем — на кнопке ОК.
Ссылка автоматически будет установлена, после чего окно закроется. Если вы не сохранили свою страницу, откроется окно с сообщением, в котором будет сказано, что
относительную ссылку можно создать только после сохранения страницы. Всегда сохраняйте страницы, над которыми работаете, перед созданием ссылки.
Если страница является частью набора фреймов, укажите в поле Target (Цель) на
панели Properties Inspector, в каком фрейме должна появиться подключенная
страница. (Более подробно об установке ссылок во фреймы вы узнаете из главы 7.)

Установка ссылок к именованным анкерам на странице
Если вы планируете создавать очень длинные страницы, воспользуйтесь анкерными ссылками, чтобы упростить перемещение по ним. Именованная анкерная ссылка, часто называющаяся ссылкой перехода, позволяет установить ссылку на определенную часть Webстраницы. Именованный анкер используется для связи изображения или строки текста страницы с другой частью той же страницы или для подключения одной страницы к определенной части другой. Чтобы создать именованную анкерную ссылку, вначале следует вставить
именованный анкер в ту область, в которую необходимо будет перейти. Затем воспользуйтесь
данным анкером, чтобы направить пользователя к определенной части страницы.
Предположим, что требуется установить ссылку от слова Трансформируемые, расположенного в верхней части страницы, к тому разделу в ее нижней части, который начинается
заголовком Трансформируемые спортивные машины. Для этого вначале вставьте именованный анкер в заголовок Трансформируемые спортивные машины, а затем подсоедините к нему слово Трансформируемые вверху страницы.
Чтобы вставить именованный анкер и создать ссылку на него, выполните следующие
действия.

62

Часть /. Осуществление

1. Откройте страницу, в которую требуется вставить именованный анкер.
2. Щелкните мышью, чтобы поместить курсор на слово или изображение, к которому будет сделана ссылка.
Выделять слово или изображение не обязательно. Требуется указать только точку для
связи, которая будет выведена на экран после активизации ссылки. В данном примере
я установила курсор слева от заголовка Трансформируемые спортивные машины.
3. Выберите команду Insert^Named Anchor (Вставка«=>Именованный анкер).
Откроется диалоговое окно Named Anchor.
4. Введите имя анкера.
Имя для анкера можно выбрать любое, но при этом необходимо следить за тем, чтобы
имена анкеров одной страницы не совпадали. Также следует запомнить это имя, так
как его придется вводить при установке ссылки. (В отличие от других программ для
Web-дизайна, Dreamweaver автоматически не вводит имя анкера.) В этом примере
в качестве имени анкера выбрано слово Convertible (Трансформируемые), так как лично для меня его легче запомнить.
5. Щелкните на кнопке ОК.
Диалоговое окно закроется, а на странице (в месте, где был установлен курсор) появится небольшая пиктограмма в виде якоря. Именованный анкер можно переместить,
перетащив эту пиктограмму в другую часть страницы.
Если вам любопытно, как выглядит именованный анкер в HTML, то ниже приведен код,
появившийся в моем примере перед заголовком:
.
6. Чтобы установить ссылку на именованный анкер, выделите текст или изображение,, которое будет играть роль ссылки.
Подсоединиться к именованному анкеру возможно из любой точки этой или другой
страницы. В данном примере была создана связь между словом Трансформируемые
в верхней части страницы и анкером, который добавили возле заголовка.
7. На панели Properties Inspector в поле Link введите символ решетки (#) и сразу
после него — имя анкера.
Можно выделить текст и перетащить вектор пиктограммы Point to File (указать файл) (слева
от текстового поля Link) на пиктограмму с якорем. Имя анкера автоматически появится
в текстовом поле ссылки, и при этом отпадет необходимость вводить его вручную.
В приведенном примере было введено Convertible в текстовое поле Link. HTML-код
для этой строки выглядит следующим образом:
Convertible.
Если требуется установить ссылку на анкер Convertible, расположенный на другой
странице под названием c o o l c a r s . h t m l , то в текстовом поле Link следует ввести
coolcars.html#convertible.

Установка ссылок на страницы, расположенные за пределами
вашего Web-узла
Подключение страницы другого Web-узла, т.е. создание внешней ссылки, осуществить
еще проще, чем создавать внутреннюю ссылку. Все, что для этого потребуется, -—URL страницы, которую планируется подключить.

Глава 2. Задание параметров Web-узла в Dreamweaver

Чтобы создать внешнюю ссылку, выполните следующие действия.
1. Откройте в Dreamweaver страницу, в которой будете создавать ссылку.
2. Выделите текст или изображение, которые выполняют роль ссылки.
3. В текстовом поле Link панели Properties Inspector введите URL страницы, на
которую будет ссылаться текст или изображение (рис. 2.11).
Format [None
,*§[ Style | None
FortfSeTalftTonr^] ял\н£*~&

_

_ yk\ В / E j S . S B
Unk U t t p j ^ ^
Mf
iE JE i i if Target!
"3?

РИС. 2.11. Чтобы установить ссылку на другой Web-узел, выделите текст
те URL в текстовом окне Link панели Properties Inspector
Ссылка автоматически будет установлена.
Несмотря на то, что в большинстве браузеров не обязательно вводить префикс
h t t p : //. перед адресом Web-узла, при создании внешней ссылки рекомендуется
использовать полный URL, включая h t t p : //. В противном случае браузер может считать, что www. w h a t e v e r . com — это имя папки вашего Web-сервера,
а не адрес внешнего узла. В результате на экране возникнет ошибка 404 - Page
Not Found E r r o r . (На рис. 2.11 показано, как установить ссылку на Web-узел
компании Macromedia с помощью полного URL.)

Установка ссылки на адрес электронной почты
Существуют также ссылки на адрес электронной почты. Такие ссылки позволяют посетителям отправлять вам сообщения. Я всегда рекомендую оставлять контактную информацию
для пользователей, так как они могут сообщить вам об ошибках на узле и дать ценные советы
о путях его дальнейшей разработки.
Установить ссылку на адрес электронной почты почти так же легко, как установить ссылку на другую Web-страницу. Для этого, конечно, необходимо знать сам адрес электронной
почты. Кроме того, вы должны знать, что сама ссылка начинается с кода m a i l t o : . Приведем
пример строки кода для ссылки на адрес электронной почты:
Send a message t o t h e Janine
Чтобы создать в Dreamweaver ссылку на адрес электронной почты, выполните следующие действия.
1. Откройте в Dreamweaver страницу, на которой следует создать ссылку, и поместите курсор в ту часть, в которой вы хотите это сделать.
2. Если вы решили использовать существующее изображение или блок текста, выберите изображение или выделите текст, который будет играть роль ссылки.
3. Щелкните на пиктограмме Email Link (в виде маленького конверта), расположенной на панели Common Insert в верхней части экрана.
Откроется диалоговое окно Email Link. Если вы перед нажатием на кнопке Email Link
выбрали текст, то он автоматически будет вставлен в поле Text.
4. Введите или отредактируйте текст, представляющий ссылку, в поле Text, а затем
в поле Email введите адрес электронной почты.
На странице автоматически появится введенный текст с установленной ссылкой на адрес электронной почты.

64

Часть /. Осуществление м

Если вы хотите воспользоваться панелью Properties Inspector для создания
ссылки на адрес электронной почты, выделите тот текст или изображение, который будет играть роль ссылки, а затем введите в текстовой области ссылки
mail t o : и адрес электронной почты.

Jlfiocatoinfi cfHftaHU^bt € Page Properties (ИзменитьФСвойства страницы).
Появится диалоговое окно Page Properties, изображенное на рис. 2.12.
2. Щелкните на панели с образцом цвета после надписи Background Color (Цвет
фона), чтобы открыть цветовую палитру. Выберите понравившийся вам цвет.
(Просто убедитесь, что он хорошо сочетается с выбранным цветом текста и что
текст легко можно будет прочитать.)
Выбранный вами цвет появится в панели с образцом. Фон не будет закрашен этим
цветом, пока вы не щелкнете на кнопке Apply (Применить) или ОК.
3. Щелкните на панели с образцом цвета после надписи Text color (Цвет текста),
чтобы открыть цветовую палитру. Выберите понравившийся вам цвет (но опять
же убедитесь, что текст можно будет прочитать на фоне страницы. Чаще всего
светлый фон хорошо сочетается с темным текстом и наоборот.)
4. Щелкните на кнопке Apply, чтобы увидеть, как выглядят цвета на вашей странице. В завершение щелкните на кнопке ОК.

Лоцключение Web-if зла к Internet
В разделе "Установка нового или существующего узла" ранее в этой главе мы рассматривали задание параметров узла, в том числе адрес, регистрационное имя и пароль для сервера.
В этом разделе вы узнаете, как поместить, страницы на сервер или извлечь их оттуда с помощью встроенных FTP-функций Dreamweaver.
Чтобы переместить файлы между жестким диском и удаленным сервером, выполните следующие действия.
1. Вначале убедитесь, что вы определили свой узел (как описывалось в разделе
"Установка нового или существующего узла" вначале этой главы) и что именно
этот узел открыт в редакторе. Существующий узел можно открыть, выполнив
команду SiteManage Sites (Узел«=>Управлять узлами), а затем выбрав необходимый узел в открывшемся диалоговом окне.
Если все сделано правильно, файлы и папки вашего узла должны появиться во вкладке
Files панели Files с правой стороны рабочей области (рис. 2.13).
2. Щелкните на кнопке txpand/Collapse (Развернуть/Свернуть) в верхнем правом
углу меню File, сразу под раскрывающимся списком View.
Панель Files развернется на весь экран, и вы увидите дополнительные опции. Чтобы
свернуть панель, снова щелкните на кнопке Expand/Collapse.
3. Щелкните на кнопке Connect to Remote Host (Подключиться к удаленному хосту).
Если в данный момент вы не подключены к Internet, то после нажатия кнопки Connect
to Remote Host должно установиться соединение. Если при этом возникли какие-то
проблемы, попробуйте установить связь с Internet, как обычно, когда вы проверяете
электронную почту или путешествуете в Web. После этого вернитесь в Dreamweaver
и щелкните на кнопке Connect to Remote Host. Когда связь установлена, у Dreamweaver не должно возникнуть проблем при FIP-соединении с вашим сервером.

66

Часть I. Осуществление м

Кнопка Put Files
(Передать файлы)
Кнопка Get Files
(Получить файлы)
Кнопка Refresh
(Обновить)
Кнопка Connect to Remote Host
(Подключиться к удаленному хосту)

Кнопка Check Out Files
(Передать файлы на)
Кнопка Check In Files
(Передать файлы с)
Кнопка Expand/Collapse
(Развернуть/Свернуть)

< f o n t s i z e =
(Комбинируемые
"2">Вы должны посетить замечательные W e b - y 3 ^ < / f o n t > < / f o n t >
вложенные
будет занесен в список, так как его можно упростить следующим образом:
дескрипторы
Page Properties (Изменить^Свойства страницы).
6. После внесения изменений в шаблон выполните команду Modlfy^Templates^
Update Current Page (Изменить«=>Шаблоны«^Обновить текущую страницу).
7. Страница, которую вы открыли, изменится, причем с учетом изменений, внесенных
вами в шаблон.
Если вы сохраните шаблон после внесения изменений, автоматически откроется диалоговое окно Update Pages (Обновление страниц), в котором можно будет выбрать
страницу (страницы) для обновления. Выберите All (Все), чтобы сразу обновить все
страницы, или одну (несколько) страниц, чтобы обновить их отдельно. Также можно
выбрать Don't Update (He обновлять), если вы не готовы внести изменения.
Чтобы изменить шаблон и обновить сразу все файлы вашего узла, связанные с этим шаблоном, выполните следующие действия.
1. Откройте существующий шаблон и внесите все необходимые изменения.
2. Выполните команду Modify^TemplatesOUpdate Pages (Изменить^Шаблоны^
Обновить страницы).
3. Откроется диалоговое окно Update Pages.
4. В раскрывающемся списке Look In (Искать в) выберите одну из следующих опций:
• Entire site (Весь узел)— следует указать имя узла, чтобы обновить все его
страницы в соответствии с шаблоном;
• Files That Use (файлы, использующие) — укажите имя шаблона, чтобы обновить все страницы текущего узла, использующие данный шаблон.
Убедитесь, что в опции Update (Обновить) выбран пункт Templates.

5. Щелкните на кнопке Start (Пуск) с целью начать процесс обновления.
После завершения обновления откроется диалоговое окно Updated Pages
(Обновленные страницы) с перечнем измененных страниц.

Глава 4. Координирование работ по дизайну

f
использование элементов
с помацью функции {library
Функция Library (Библиотека) нечасто встречается в других программах для Web-дизайна,
поэтому данное понятие может быть для вас новым, даже если вы уже ранее разрабатывали
Web-узлы. Однако чем больше у вас опыта, тем лучше вы оцените это свойство, которое поможет вам сэкономить время.
Функция Library была разработана для автоматизации процесса вставки и изменения элементов, которые встречаются на нескольких страницах Web-узла. В качестве элемента библиотеки можно сохранить любой объект, например, логотип или строку из изображений
и ссылок для перемещения. После этого вы вправе вставить данный элемент (или набор элементов) в любую страницу, просто перетащив его из библиотеки. Создайте один раз какойнибудь элемент и используйте его по всему у з л у — библиотека является отличным местом
для хранения объектов перемещения и других часто повторяющихся элементов. Более того,
если вам когда-нибудь понадобится изменить элемент библиотеки (например, добавить ссылку или изображение), отредактируйте его, после чего Dreamweaver автоматически внесет изменения по всему узлу. Правда, одна библиотека не может использоваться сразу в нескольких
узла^с, поэтому для каждого из них должна быть своя библиотека.
Элемент библиотеки — это просто часть кода, в котором могут содержаться изображения
и ссылки. Так же, как и шаблоны, элементы библиотеки упрощают создание узла. Например,
один человек может создать логотип, а другой — элементы перемещения по узлу. И то, и другое
помещается в библиотеку и предоставляется всей команде. Кроме того, элементы библиотеки
позволяется размещать в любой части страницы и даже по несколько раз.
Элементом библиотеки может стать любой объект из тела документа: текст, таблицы, формы, изображения, Java-аплеты, файлы надстройки. Такие элементы очень эффективны, так как
Dreamweaver сохраняет части кода в виде документа в папке L i b r a r y , а затем обновляет ссылки на него каждый раз, когда применяется один из его элементов. В элементах библиотеки также могут храниться поведения, хотя для их редактирования существуют особые требования.
В качестве элементов библиотеки нельзя хранить таблицы стилей, так как код для
этих объектов является частью заголовка HTML-файла. (Более подробная информация о таблицах стилей находится в главе 8.)

Создание и использование элементов библиотеки
В следующих разделах речь пойдет о создании элемента библиотеки, добавлении его на
страницу и редактировании при изменении элемента страницы. Чтобы созданные составляющие
узла работали безупречно, описанные действия необходимо выполнять аккуратно и последовательно. Перед тем, как создать или воспользоваться элементами библиотеки, определите или
откройте уже существующий узел. Если вы не знаете, как это сделать, перейдите к главе 2.
Лучше всего создать элемент библиотеки на существующей странице, так как
в этом случае вы будете точно знать, что элемент выглядит так, как следует, и его
смело можно будет добавить в библиотеку. Конечно, элемент Можно отредактировать и после того, как он будет внесен в библиотеку, но тогда он будет иметь другой вид, чем на странице. Например, в элементе библиотеки отсутствует дескриптор , поэтому цвета его ссылок и текста будут установлены по умолчанию
(это будет синий и черный цвет). Однако на странице установки дескриптора
будут влиять на цвета ссылок и текста.

96

Часть //. ВЫГЛЯДИТ на МИЛЛИОН (даже по с

Создание элемента библиотеки
Чтобы создать элемент библиотеки для последующего использования на нескольких страницах, выполните следующие действия.
1. Откройте существующий файл с изображениями, текстом
или другими элементами страницы.
Строка перемещения, состоящая из изображений и ссылок,
которая повсеместно используется на вашем Web-узле, подойдет как нельзя лучше для свойства Library.
2. Выберите на странице объект, который требуется сделать элементом библиотеки (например, элементы перемещения по узлу).
3. Выполните команду Modify^Library^Add
Object
to Library (Изменить^Библиотека«=> Добавить объект
в библиотеку).
На панели Files откроется вкладка Assets с библиотекой.
Новый элемент будет обозначен как "Untitled".
4. Назовите элемент, как вы это делаете в проводнике
Finder на Мае ил и Explorer на PC.
Когда элементу библиотеки присваивается имя, он автоматически сохраняется, после чего его легко можно применить
к любой новой или уже существующей странице узла. Все Рис. 4.5. Панель Assets
элементы библиотеки перечислены в разделе Library панели предоставляет доступ ко
всем элементам библиотеки
Assets, изображенной на рис. 4.5.

Добавление элемента библиотеки на страницу
Элемент извлекается из библиотеки так же просто, как и вставляется в нее. При добавлении
элемента библиотеки на страницу в документ вносится содержимое (и ссылка на него).
Чтобы добавить на страницу элемент библиотеки, выполните следующие действия.
1. Создайте в Dreamweaver новый документ или откройте уже существующий.
2. В панели Files выберите вкладку Assets и щелкните на пиктограмме Library.
На панели Assets откроется панель Library.
3. Перетащите элемент из панели Library в окно документа.
Также можно выбрать элемент из панели Library, щелкнуть на нем правой кнопкой
мыши и затем перейти к Insert (Вставить).
Элемент автоматически появится на странице. После этого можно воспользоваться любыми функциями форматирования в Dreamweaver, чтобы правильно его расположить.

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

Глава 4. Координирование работ cio дизайну

97

1. Выполните команду Edit^Preferences (Правка^Настройки).
Откроется диалоговое окно Preferences.
2. Слева, в разделе Category (Категория), выберите Highlighting.
3. Щелкните на цветовом поле, чтобы выбрать цвет для элементов библиотеки.
Установите флажок Show (Показать)—в результате на страницах будут выделены элементы библиотеки. Оставьте флажок неустановленным, если нет необходимости выделять элементы цветом.
4. Щелкните на кнопке ОК — диалоговое окно Preferences будет закрыто.

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

1. В панели Files выберите Assets и щелкните на пиктограмме Library.
Откроется панель Library.
2. Выберите любой элемент из списка и дважды на нем щелкните, чтобы открыть его.
Dreamweaver откроет новое окно для редактирования элемента библиотеки.
Так как элемент библиотеки — это всего лишь часть кода, в нем отсутствует дескриптор , в котором указывается цвет фона, ссылки или текст. Не следует волноваться по этому поводу, так как элемент библиотеки всегда имеет тот цвет или фоновое изображение, что и страница, на которой он находится.
3. Внесите в элемент библиотеки все необходимые изменения.
Например, можно перенаправить ссылку текстовых элементов или изображений, отредактировать формулировку или изменить шрифт, добавить изображение или текст.
4. Выберите команду File^Save (Файл^Сохранить), чтобы сохранить изменения
в оригинальном элементе или команду File«=>Save As (Файл^Сохранить как),
затем присвойте новое имя для создания нового элемента библиотеки.
Откроется диалоговое окно Update Library Items со списком всех страниц, в которых
находится элемент библиотеки.
5. Выберите одну или несколько страниц, в которые следует внести изменения, после этого щелкните на кнопке Update. Чтобы отменить операцию и не обновлять
страницы, щелкните на кнопке Don't Update.
Откроется диалоговое окно Update Pages, в котором можно просмотреть процесс
обновления. Если необходимо, из этого окна можно отменить обновление.

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

98

Часть II. Выглядит на миллион (даже п

1. Откройте любой файл, в котором содержится элемент библиотеки, и щелкните на нем.
В панели Properties Inspector появятся его опции.
2. Щелкните на кнопке Detach from Original (Отделить от оригинала).
Будут выведены сообщения с предупреждением о том, что после отделения элемента
библиотеки от оригинала его больше нельзя будет обновить в результате редактирования оригинала.
3. Щелкните на кнопке ОК — элемент библиотеки будет отделен.
Не забывайте, что после разрыва связи вы не сможете автоматически обновить
элемент библиотеки.

использование йь/гасси/а/кнцего
изображения, nfiu /газмейь/се
Свойство Macromedia Tracing Image (Трассирующее изображение) является уникальным средством Web-дизайна, даже несмотря на то, что само понятие возникло довольно давно. Это свойство позволяет использовать графику с целью облегчить проектирование (подобно тому, как тонкий лист бумаги накладывают на существующее изображение, а затем обводят его контуры).
Свойство трассирующего изображения идеально подходит для тех, кто предпочитает вначале создать дизайн в таких программах, как Photoshop или Fireworks, а затем заняться моделированием Web-страницы. Используя это свойство в качестве фона страницы, следует вставить изображение, которое затем можно повторить. Поверх него размещаются слои или
ячейки таблицы, после чего довольно просто воссоздать дизайн в HTML. В трассирующем
изображении допускается использовать форматы JPG, GIF или PNG, а создается оно в любом
графическом редакторе, поддерживающем указанные форматы.
Несмотря на то, что трассирующее изображение устанавливается в качестве фона страницы, оно не замещает реальное фоновое изображение и не отображается браузером.
Чтобы добавить трассирующее изображение на страницу, выполните следующие действия.
1. Создайте или откройте существующую страницу.
2. Выберите команду Modify^Page Properties (Изменить^Парамегры страницы).
Откроется диалоговое окно Page Properties, как показано на рис. 4.6.
3. Выберите из списка категорий с левой стороны диалогового окна трассирующее
изображение.
Опции трассирующего изображения будут показано справа.
4. Щелкните на кнопке Browse (Обзор), чтобы выбрать трассирующее изображение.
Откроется диалоговое окно Select Image Source (Выберите изображение).
5. Щелкните на изображении, которое будет использоваться как трассирующее.
6. Щелкните на кнопке ОК.
7. Установите прозрачность трассирующего изображения с помощью ползунка
Transparency (Прозрачность).
Чтобы было легче отличать трассирующее изображение от редактируемых элементов
страницы, увеличьте уровень его прозрачности. Этот уровень можно сделать каким
угодно, но в большинстве случаев около 50% бывает достаточно.

Глава 4. Координирование работ по дизайну

£9

Рис. 4.6. В диалоговом окне Page Properties можно установить трассирующее изображение, которсю используется для разметки HTML-страницы
8. Щелкните на кнопке ОК.
Трассирующее изображение появится в окне документа, как показано на рис. 4.7.
Ette £dit ¥iew Insert fgo4№ lext

C
a

r

i

m

e

guiee
Written
Justice Jmm
.«sport ej?f.№

Ш. coachngnav.htm
ф whyabarofsoapJitml
berg.html

ur«tedstates.html
beautfiy_bnde,htn^
tooksHocfо ync «ntrni
susiecod2.htmf
sustecoo!l.htri

Рис. 4.7. С помощью трассирующего изображения можно более точно разметить
Трассирующее изображение не заменяет фонового. Его видно только при редактировании страницы в окне документа, оно никогда не отображается при загрузке
страницы в браузере.
100

Часть //. Выглядит на миллион (даже по

Также существуют и другие опции свойства трассирующего изображения. Их вы увидите
после того, как выберете команду View^Tracing Image.
Show (Показать). Скрывает трассирующее изображение, если возникает необходимость проверить работу без него, но при этом не удалять его полностью.
Align with Selection (Выровнять по выделенному фрагменту). Предоставляет возможность автоматически выровнять трассирующее изображение
по выделенному элементу страницы.
Adjust Position (Откорректировать положение). Позволяет воспользоваться клавишами курсора или ввести координаты X и Y для управления положением трассирующего изображения за страницей.
Reset Position (Сброс положения). Сбрасывает положение трассирующего
изображения в координаты (0, 0).

Общение с помощью заме&ок по уизайш/
Заметки по дизайну являются идеальным средством для общения с другими разработчиками, сотрудничающими с вами. Это свойство программы Dreamweaver работает аналогично
дескриптору комментария, но с гораздо большей степенью конфиденциальности, так как
только те, у которых есть пароль для доступа к вашему узлу, смогут увидеть заметки. Многие
разработчики используют дескриптор комментария (HTML-код, позволяющий вводить
в страницу текст, который не отображается в браузере) для передачи информации. Но любой,
кто просмотрит исходный код таких документов, сможет прочесть данный дескриптор. Поэтому указанный метод обмена информацией не безопасен. При использовании заметок по
дизайну их смогут увидеть только те, кто знает пароль доступа к вашему узлу.
Если необходимо скрыть ценную информацию (например, структуру цен или творческие
идеи), но так, чтобы ее могли просматривать остальные члены команды разработчиков, воспользуйтесь заметками по дизайну. Информация, сохраненная в программе Dreamweaver
в виде заметок по дизайну, может сопровождать любой HTML-файл или изображение, даже
если они перемещаются с одного Web-узла на другой или из Fireworks в Dreamweaver.
Чтобы активизировать свойство Design Notes, выполните следующие действия.
1. Выберите команду Site«=>Manage Sites (Узел^Управление узлами).
Откроется диалоговое окно Manage Sites.
2. Укажите узел, с которым будете работать, и щелкните на кнопке Edit
(Редактировать).
Откроется диалоговое окно Site Definition (Задание узла).
3. Выберите вкладку Advanced (Дополнительные параметры).
4. В списке категорий слева укажите пункт Design Notes.
Откроется страница Design Notes.
5. Установите флажок Maintain Design Notes (Использование заметок по дизайну),
если он не был установлен.
После установки этой опции (когда бы файл ни копировался, перемещался, переименовывался или удалялся) присоединенные к нему заметки по дизайну также будут
с ним копироваться, перемещаться, переименовываться или удаляться.

Глава 4. Координирование работ по дизайну

'191

6. Если вы хотите, чтобы заметки по дизайну отправлялись вместе с файлами
в процессе перенесения на сервер, установите флажок Upload Design Notes for
Sharing (Выгружать заметки по дизайну для совместного использования).
Если вы делаете заметки только для себя и не хотите, чтобы они присоединялись
к странице при выгрузке ее на сервер, снимите этот флажок — заметки по дизайну будут использоваться только локально.
7. Щелкните на кнопке ОК в диалоговом окне Site Definition, а затем — на кнопке
Done в диалоговом окне Edit Sites.
Диалоговое окно Manage Sites закроется.
Чтобы добавить к документу заметки по дизайну, выполните следующие действия.
1. Откройте файл, к которому следует добавить заметки по дизайну, затем выполните команду File^Design Notes.
Откроется диалоговое окно Design Notes (рис. 4.8).

fife: bos.htmi
location: ...s andЗДЪгф\ДОуOocunents\123hopstudk»VaimeguideVvd>

Рис. 4.8. Заметки по дизайну позволяют легко присоединять
сообщения для других членов команды разработчиков к HTMLфайлам или изображениям
2. Выберите статус документа в раскрывающемся списке Status.
В списке содержатся следующие опции: Draft (Эскиз), Revision 1 (1-я редакция), Revision 2 (2-я редакция), Revision 3 (3-я редакция), Alpha, Beta, Final (Финальная версия) и Need Attention (Требует внимания). Можно выбрать любой из этих статусов, но
прежде следует обсудить в команде дизайнеров значение каждого статуса и определить использование этих опции для управления разработкой.
3. Внесите свои комментарии в текстовом окне Notes (Заметки).
4. Щелкните на пиктограмме с датой (сразу над текстовым полем Notes), если хотите вставить текущую дату.
Текущая дата будет автоматически установлена.
Также можно установить флажок Show When File Is Open (Показывать при открытии файла). В результате заметки по дизайну будут всегда открываться при открытии
файла, причем их нельзя будет не заметить.

102

Часть II. Выглядит на миллион (даже

5. Щелкните в диалоговом окне Design Notes на вкладке All Info (Информация
для всех).
На этой вкладке можно добавить другую информацию, которая будет полезна разработчикам узла. Например, укажите ключ дизайнера (в поле Name) и определите значение для имени этого человека иди для приоритета проекта (в поле Value). Также
можно определить поле для клиента или тип файла, который вы обычно используете.
6. Щелкните на знаке "плюс" (+) чтобы добавить новый ключ, или "минус" (-),
чтобы удалить его.
7. Щелкните на кнопке ОК для сохранения всех заметок.
Введенные вами заметки будут сохранены в подкаталоге notes в той области, где находится текущий файл. Имя файла состоит из имени документа и расширения . шло. Например, если файл назывался a r t . htm, то подключенный файл заметок по дизайну
будет носить имя a r t .htm.mno. Заметки по дизайну обозначаются в окне Site View
небольшой желтой пиктограммой» в виде анимированного пузырька. Также их можно
найти в каталоге вашего жесткого диска.

Общение с использованием, вспоенной
Встроенная в Dreamweaver электронная почта является еще одним удобным средством
совместного Web-дизайна при использовании функции Check In/Out (Передать с/на).
(Функция Check In/Out подробно описывается в главе 2.) Данное свойство позволяет применять Dreamweaver вместе с лкЭбой программой электронной почты и при необходимости легко находить адреса других членов команды.
Когда вы работаете над узлом в команде, часто случается так, что необходимая вам страница уже взята кем-то с сервера, и вы не можете над ней работать. В диалоговом окне
Dreamweaver Site Definition каждый разработчик может ввести свой адрес электронной почты в свойстве Check In/Check Out. Когда вы обнаружите, что нужной вам страницы нет,
просто отправьте человеку, взявшему ее, сообщение с просьбой вернуть документ обратно,
чтобы вы смогли приступить к работе. (Иногда, конечно, угрозы срабатывают, но шоколадка
или какой-то другой подарок более эффективны.)
Разработчики в вашей команде должны выполнить следующие действия, чтобы связать
при настройке функции Check In/Check Out свои адреса электронной почты с версией программы Dreamweaver.
1. Выберите команду Site^Manage Sites.
Откроется диалоговое окно Manage Sites.
2. Укажите узел, с которым будете работать, и щелкните иа кнопке Edit
(Редактировать).
Откроется диалоговое окно Site Definition (Задание узла).
3. Щелкните на вкладке Advanced.
4. В списке категорий слева выберите Remote Info (Данные удаленного узла).
Откроется страница Remote Info (рис. 4.9).
5f Установите флажок Enable File Check In/Check Out (Включить передачу
файлов с/на).

fmim 4, Координирование работ по дизайну

1Ш

Category

&ocess: I FTP
FTP host: [jusbcejounwfem.ore
Host ^rectory: j /web/mmeguide/
Logn: jyourusend

passive FTP
D U« S€«Jte *TP (5FTP)
• AytomatalY uploadfifestoserver on save
0 Enable file check n Kid check out
©Check out «Ses when opening
Chedc out name: j jSuswriah Gardner
Q&at address: yomfryourdomain.eomj

:
;

Рис. 4.9. Можете привязать ваш адрес электронной почты к функции Check In/Check Out, чтобы другим разработчикам было
проще отправлять вам сообщения
6. Установите флажок Check Out Files When Opening (Отмечать открытые файлы как выбывшие).
7. Введите в текстовое поле Check Out Name ваше имя.
Можно ввести и прозвище, но только в том случае, если все члены команды его знают.
8. Введите в текстовое поле Email Address ваш адрес электронной почты.
9. Щелкните на кнопке О К, чтобы сохранить изменения. Щелкните в диалоговом
окне Manage Sites на кнопке Done.
Диалоговое окно Manage Sites закроется.

tc uctnoftuu
Работая над проектом, вы можете следить за тем, что делаете, и даже повторять свои
действия с помощью панели History (Журнал). Эта панель также позволяет отменять одно
или несколько действий и создавать команды для автоматизации
выполнения часто повторяющихся задач.
Чтобы открыть панель History, изображенную на рис. 4.10, выполните команду Window«=>History (Окно^Журнал). Как только вы
это сделаете, программа автоматически начнет записывать все ваши
действия, выполняемые в программе Dreamweaver. Вы не сможете
изменить их порядок, но зато сможете их скопировать, повторить
или отменить. Не следует считать панель History произвольным набором команд — она является эффективным средством просмотра
РИС 4 10 Панель History Д е й с т в и й » которые следуют в порядке их выполнения. С помощью
следит за всем что вы э т о ^ ФУНК1^ИИ можно заставить Dreamweaver делать за вас работу,
сделали, позволяя отме- ^ТОРУ 10 необходимо выполнять много раз подряд. Функция History
нить, переместить или по- т а ю * е придет на помощь, если вы допустили серьезную ошибку
вторить любые действия и решили вернуться назад на один или несколько шагов.

104

Часть //. Выглядит на миллион (да

Далее приводится краткое описание способов применения панели History.
У

Копировать уже выполненные действия. Воспользуйтесь опцией Сору
Steps (Копировать действия) как быстрым способом автоматизации тех действий, которые требуется повторить. При этом можно даже выбрать некоторые действия, если вы хотите повторить только часть из них.

S Повторить любое или все действия, показанные на панели History*
Выделите действия, которые следует повторить, и щелкните на кнопке Replay (Повторить) внизу панели History.
^ О т м е н и т ь результаты повторенных действий. Выполните команду
Edit^Undo Replay Steps (Правка^Отменить повторенные действия).
S Применить действия к определенным элементам на странице. Выделите
этот элемент в окне документа перед тем, как выбрать и повторить действия.
Например, если вы применили к какому-то тексту на странице полужирный
курсив, то можете повторить это действие к другому выбранному тексту.
Чтобы установить число действий, отображаемых в панели History, выберите команду Edit«=£ Preferences (ПравкамНастройки) и General (Общие) в списке категорий слева. Значение по умолчанию равно 50, что более чем достаточно для
большинства пользователей. С увеличением данного числа увеличивается объем
памяти, занимаемый панелью History.

использование Яыап/юго fteqatc/flofia
qeacfiunttiofioe
Если вам нравится работать в среде редактирования программы Dreamweaver WYSIWYG,
но периодически вы все-таки заглядываете в HTML-код, то наверняка по достоинству оцените быстрый редактор дескрипторов.
Как видно из названия, он позволяет изменять, добавлять или удалять HTML-дескриптор,
не открывая окно HTML-кода. Это означает, что во время работы над страницей можно быстро открыть нужный дескриптор, не покидая окно документа. Указанный редактор используется также для вставки HTML, редактирования существующего дескриптора, описания выбранного блока текста или элемента новым дескриптором.

р

'•

Рис. 4.11. В быстром редакторе дескрипторов можно реагировать ИШЬкод, не о

Глава 4. Координирование работ по дизайну

107

Глава 5

Добавление графики
8 э*1ой
> Создание изображений
>

Использование готовых изображений

>
>

Выбор графического редактора
Уменьшение размера файлов

>
>

Вставка изображении
Использование карт изображений

*¥^г езависимо от того, насколько профессионально и увлекательно составлен текст на ват т* шем Web-узле, в первую очередь, посетителей всегда привлекает графика. И для того,
чтобы произвести хорошее впечатление, необходимо, прежде всего, воспользоваться изображениями, которые хорошо смотрятся, быстро загружаются и соответствуют вашему Web-узлу.
Если вы ранее уже работали с графическими редакторами и создавали графические изображения, значит, вы вырвались на шаг вперед. Если же нет, то вскоре узнаете, как
использовать уже существующие изображения на вашем Web-узле. В этой главе рассказывается, как поместить изображения в Dreamweaver и как их отредактировать, не отрываясь
от Web-дизайна. Вы также найдете описания наиболее популярных графических редакторов и познакомитесь с методами уменьшения размера файлов.
Если у вас уже есть готовые изображения и вы хотите поместить их на страницы, перейдите к разделу "Вставка изображений на страницы", где вы узнаете, как вставлять и выравнивать изображения, создавать карты изображений и устанавливать фоновое изображение. Вы
также ознакомитесь с новейшими функциями DreamWeaver, позволяющими обрезать изображения и даже изменять их контраст и яркость, не запуская внешнего графического редактора.

Лоис/чение профессиональной ificuputcu
Вам необходима хорошая Web-графика, но вы не знаете, где ее взять? Что ж, если вы обладаете дизайнерским талантом, то можете самостоятельно создать изображения в Fireworks
или в любом другом графическом редакторе (обо многих из них будет рассказано в разделе
"Создание изображений" далее в этой главе). Если же вы не художник, то лучше воспользоваться уже готовыми изображениями из бесплатной коллекций, о которой я упомяну в этом
разделе. Если у вас есть сканнер, то отсканируйте готовые фотографии или логотипы.
К сожалению, в программе Dreamweaver нет функций для создания или редактирования
изображений, поэтому вам придется воспользоваться отдельной программой. Правда, если вы
приобрели пакет Dreamweaver/Fireworks Studio, то вам повезло: вы будете иметь все, что необходимо, чтобы создавать и редактировать изображения для Web-узла. Иначе вам понадобится отдельная программа. Программа Dreamweaver легко интегрируется практически с любым графическим редактором, по этой причине многие дизайнеры используют Photoshop, Image Ready и другие программы для создания изображений.

Приобретение коллекций клипов и фотографий
Если вы не хотите нагружать себя созданием изображений (или, как в случае со мой, у вас
не хватает таланта художника), то воспользуйтесь источниками, предлагающими коллекции
клипов. За готовые изображения, в число которых входят коллекции клипов и фотографии,
обычно требуется внести единоразовую плату, после чего вы получите права на их использование. (Ознакомьтесь с соглашением, которое поставляется вместе с коллекцией, и убедитесь,
что вы не пропустили каких-либо исключений.) Существует достаточно много компактдисков и Web-узлов, до отказа заполненныхколлекциями клипов, фотографиями и даже анимацией, которые можно использовать на вашем Web-узле. В настоящее время, говоря об
анимации, можно найти Web-узлы, на которых продаются Hash-файлы, анимация, кнопки
и другие художественные элементы, которые можно отредактировать и внести в свой Webузел. Более подробно о создании мультимедийного Web-узла рассказывается в главе 12. Многие профессиональные дизайнеры покупают коллекции изображений, а затем с помощью
графического редактора (Macromedia Fireworks, Adobe Illustrator или Adobe Photoshop) перекраивают их для определенного проекта или делают изображение каким-то особенным. Приведем список некоторых поставщиков коллекций клипов.
Getty Images, Inc. ( w w w . g e t t y i m a g e s . c o m ) . Компания Getty Images
является крупнейшим поставщиком электронных изображений в Webпространстве. Она специализируется на фотографиях, иллюстрациях и даже
видеороликах. Заплатите за изображения и пользуйтесь, сколько душе угодно.
Stockbyte ( w w w . s t o c k b y t e . c o m ) . Компания Stockbyte является международным поставщиком изображений. Вы сможете приобрести немало фотографий необходимого качества.
Photos.com (www.photos.com). Photos.com— это служба рассылки фотографий. Годовая подписка позволяет вам без ограничений пользоваться коллекциями этой компании.
Fonts.com (www. f o n t s . com). На узле Fonts.com можно выбрать и приобрести огромное количество шрифтов. Найти необходимый шрифт можно по его
названию или по описательным ключевым словам. Вам также с радостью помогут, если вам нужен определенный шрифт, но вы не знаете его название.
' Web Promotion (www-webpromotion.com). Замечательный источник анимированных GIF-файлов и другой Web-графики. Изображения можно использовать бесплатно, установив на своем узле ссылку на Web Promotion, или недорого приобрести.

Создание собственных изображений
Чтобы получить оригинальное изображение, лучше всего создать его самому. Если же вы не
сильны в графике, попробуйте попросить кого-нибудь, кто сможет сделать это для вас. Для создания изображений, которые впоследствии будут использоваться в программе Dreamweaver, наилучшим образом подойдет программа Fireworks, так как она тесно связана с Dreamweaver и обеспечена
легко используемыми функциями. Fireworks — эффективное средство для создания Web-графики.
Причем изучить его несложно, так как данная программа обладает таким же интерфейсом, как
и у Dreamweaver. Однако можно использовать любой другой графический редактор как отдельно, так и совместно с Fireworks. Некоторые из них перечислены далее в этом разделе.
За последние несколько лет функции и возможности специализированных программ для
создания Web-графики были значительно усовершенствованы. К тому же, обострилась конку-

Глава & Добавление графики

109

ренция между производителями приложений, особенно между Adobe и Macromedia. Не удивительно, что на сегодняшний день лучшими из графических редакторов считаются Macromedia
Fireworks и Adobe Photoshop. Спросите у хорошего Web-дизайнера, какой он использует графический редактор, и вы услышите одно из этих двух названий. Если вы всерьез решили заняться
изображениями, рекомендуем приобрести одну из этих программ — они достаточно быстро окупят
себя и помогут достичь вам профессиональных результатов в Web-проектах. Не считая интеграции
Fireworks с Dreamweaver, они отличаются только тем, что Fireworks специально разрабатывалась
для создания Web-графики, тогда как Photoshop является любимой программой печатных дизайнеров, в которой присутствует ряд функций, необходимых при создании Web-графики.
Однако если у вас нет средств или времени на изучение более сложных программ, обратитесь к более ограниченному в возможностях графическому редактору (например, Adobe Photoshop Elements, который стоит всего $99). В процессе создания кнопок, баннеров и другой
Web-графики обратите внимание на Jasc Paint Shop Pro или MicroFrontier Color It!
Если в описании программы не отмечено обратное, то она доступна и в Мае, и в Windowsверсиях. Многие эти программы также позволяют с помощью сканера отсканировать фотографии и логотипы.
Macromedia Fireworks
(www.macromedia.com/software/fireworks).
Fireworks был одним из первых графических редакторов, специально разработанных для создания и редактирования Web-графики. В этом хорошо спроектированном продукте есть все, что необходимо для создания, редактирования
и выпуска качественных Web-изображений. Кроме того, Fireworks использует
похожий на Dreamweaver интерфейс и, к тому же, тесно связан с ним, дабы
упростить и ускорить процесс построения Web-узла. В главе 11 описываются
некоторые специальные функции Fireworks и Dreamweaver, которые помогают
одновременно работать с обеими программами.
Adobe Photoshop (www.adobe.com/products). Компания Adobe называет
Photoshop "камерой разума". Бесспорно, это наиболее популярный графический редактор на рынке, который также является широко используемым профессионалами стандартом. С его помощью можно создать оригинальную иллюстрацию, подкорректировать цвет в фотографиях, отретушировать отсканированные изображения и многое другое. Этот графический редактор наделен
мощными графическими средствами, специальными эффектами и фильтрами,
необходимыми для создания изображений (что вряд ли удастся вырезать из
фильма или создать в классических программах для иллюстраций). В последние
версии программы Photoshop также включены полезные средства для создания
и редактирования Web-графики, которые поднимают ее до уровня Fireworks.
Adobe Photoshop Elements (www.adobe.com/products). Для новичков
и тех, кому не нужны все прелести полной версии Photoshop, компания Adobe
выпустила программу, в которую включены только основные функции— Photoshop Elements. Эта программа часто поставляется вместе со сканерами или
принтерами. Компания Adobe утверждает, что Elements отлично подходит для
создания Web-графики, кроме того, эта программа очень проста в использовании.
Adobe Illustrator (www.adobe.com/products). Illustrator является одним
из промышленных стандартов для создания иллюстраций. Изображения, созданные в этой программе, можно свободно перенести в другие программы
компании Adobe (Photoshop или PageMaker). Illustrator также поставляется с функцией преобразования, позволяющей экспортировать иллюстрации в форматы GIF
или JPEG со специальной для браузеров палитрой цветов. Таким образом, созданные изображения будут иметь высокое качество в World Wide Web.

110

Часть II. Выглядит на миллион (даже п

CorelDRAW Essentials (www. c o r e l . com). CorelDRAW широко используется,
но не является промышленным стандартом. Он обладает почти такими же
функциями и свойствами, что и Adobe Photoshop, однако стоит дешевле. Пакет
Essentials состоит из CorelDRAW и CorelPHOTO-PAINT. Photo-Paint поставляется с богатой коллекцией клипов и фотографий. Заплатив на $180 меньше, чем
за Photoshop, вы получите полный пакет CorelDRAW Graphic Suite, в который
входят CorelDRAW и пакет Essentials. Несомненно, это отличный набор для домашнего использования, который предоставляет профессиональные сродства
создания графики и разметок страниц за довольно приемлемую стоимость.
Equilibrium DeBabelizer (www. e q u i l i b r i u m , c o m / I n t e r n e t / E q u i l /
P r o d u c t s / D e B a b e l i z e r ) . DeBabelizer от компании Equilibrium Technologies является графическим редактором, который может работать почти со
всеми форматами изображений, когда-либо использовавшимися на компьютере. Это, вероятно, не лучший выбор для создания изображений с нуля, но он
отлично выполняет задачи подготовки и оптимизации изображений для Web.
Одно из наиболее примечательных его свойств — это способность преобразовывать изображения из одного формата в любой другой. Если вам необходимо преобразовать большое количество изображений в другой формат, воспользуйтесь функцией пакетного преобразования. Она позволяет автоматически преобразовать сотни фотографий в JPEG или большое количество
графических изображений— в GIF, даже не открывая каждый файл по отдельности. Однако DeBabelizer не прост в использовании, поэтому не рекомендуем его приобретать тем, кто только начинает создавать Web-графику.
Эта программа подойдет тем, кому необходимо обрабатывать сотни изображений, или тем, кто работает со многими форматами.
Jasc Paint Shop Pro (www. j a s c . com). Paint Shop Pro от компании Jasc Software является полнофункциональной программой для рисования и редактирования изображений. Существует только в Windows-версии. Paint Shop Pro во
многом напоминает Photoshop, но более ограничена в функциях, так как не
обладает большим количеством эффектов, инструментов и фильтров. С другой стороны, Jasc Paint Shop Pro дешевле, чем Photoshop, поэтому может стать
хорошей начальной программой для новичков. Ее демонстрационную версию
можно бесплатно загрузить с Web-узла компании Jasc.
Macromedia Freehand
(www.macromedia.com/software/freehand).
Macromedia Freehand является программой для создания иллюстраций. Широко используется в Web и в печати. Ряд ее Web-свойств особо примечателен: например, поддержка файлов Web-форматов (GIF89a, PNG и JPEG),
а также векторных форматов — Flash (.SWF) и Shockwave FreeHand (.FHC).
Ее тридцатидневную демонстрационную версию можно загрузить с Webузла компании Macromedia.
MicroFrontier Color It! (www.microfrontier.com). Этот недорогой
и простой в использовании графический редактор существует только в Macintosh-версии и отлично подходит как для новичков, так и для разработчиков,
вынужденных экономить. Несмотря на то, что эта программа гораздо более
ограничена в возможностях, чем многие другие из приводимого списка, она
обладает достаточным количеством функций для создания простых баннеров
и кнопок для небольших бизнес-узлов. Бесплатная демонстрационная версия
доступна на Web-узле компании MicroFrontier.

111

Основы. Web-ificupuicu
Основы графических форматов и принципы их работы в Web — важная часть создания
графики и ее размещения на ваших страницах. По этой причине в книгу включены разделы,
предоставляющие важную информацию цо этому вопросу.
Самое важное заключается в следующем: при размещении изображений на Webстранице размеры файлов должны быть максимально уменьшены. Вы вправе спросить: "Насколько уменьшеныТ. Этот вопрос часто задают в отношении Webграфики. Помните — чем больше размер графических файлов, тем дольше приходится ждать их загрузки при просмотре. На вашей домашней странице может быть
самая красивая фотография горы Фудзияма, но для ее загрузки понадобится вечность, поэтому не каждый дождется ее появления. Также не забывайте, что при построении страниц с несколькими графическими изображениями следует учитывать
общее время их загрузки: чем меньше размер файлов, тем лучше.
Профессионалы советуют не превышать 40-60 Кбайт общего размера всей графики на
странице. Однако с увеличением популярности DSL и кабельных модемов стало появляться
много Web-узлов, более насыщенных графикой. Несмотря на это, запомните: все, что превышает 100 Кбайт, абсолютно неприемлемо, если вы хотите, чтобы пользователи с коммутируемым подключением (56 Кбит/с и ниже) втсе-таки дождались загрузки ваших страниц.
С целью облегчить определение общего размера графических файлов на странице
Dreamweaver предоставляет данную информацию в строке состояния текущего
окна документа (рис. 5.1). Это число указывает на общий размер файлов всех изображений и HTML-кода страницы, а также отображает приблизительное время загрузки при данной скорости соединения (установить скорость соединения можно,
выбрав команду Edit«=> Preferences^Status Bar=>Connection Speed (Правкам
Настройки^Строка состояния^Скорость соединения)).
Чтобы уменьшить размер файлов, воспользуйтесь методами сжатия и уменьшения количества цветов, используя любой из перечисленных в предыдущем разделе графических редакторов.
Но какую бы программу вы ни выбрали, помните, что размер изображения можно уменьшать до
определенного уровня; Главное — найти идеальное соотношение между небольшим размером
файла и хорошим качеством изображения. Если вы всерьез хотите узнать о самых эффективных
методах создания графики для Web, прочтите книгу Web-дизайн для "чайников". Особое внимание уделите фантастическому разделу, посвященному созданию Web-графики.
Пользователи часто задают вопрос относительно использования форматов GIF
и JPEG для Web. Воспользуйтесь следующими рекомендациями.

Использовать... Для...
GIF
JPEG

112

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

Часть II. ВЫГЛЯДИТ на МИЛЛИОН (даже по с

HOPSTUDIOS INTCRNfT CONSULTANTS
4hT

Размер страницы и приблизительное время загрузки

Рис. 5.1. В строке состояния программы Dreamweaver отображается общий размер файл
страницы, а также приблизительное время загрузки

^ У с т р а н е н н о г о формата PNG, GDP является единственным
За исключен
афическим форматом, в котором, можно сделать невидимым
Широко пр
fifii*~ создания эффекта прозрачности. В GIF также может нахоцвет; необхо;
^ ^ что'цозврдяет создавать короткую циничную анимацию.
диться неск<
iy Называемая баннерами, зачастую создаё1гся на основе
Реклама в
ЩзкЬ обращаются к GIF-юдбражениям» которые состоят
формата G>яьзовать не^таадар^ные шрифты fcb сглаженными
только из ся<
и *0&№ШШ,& эффектами» которм#р)р1«меняются независимо от
неровностям^
т определенного шрифта. Формат GIF идеально подналичия у кы
задач^в $ем можно использовать прозраяность* а с помощью
ходит для
1Рр-ко>шрёс!сии создавать красивый текст с
Иногда ст^ит поэкспериментировать с обоими форматами и посмотреть, какой из них
предоставляет лучший результат. Со временем вы научитесь сразу определять необходимый
формат, который будет лучше соответствовать типу создаваемого изображения.

Глава 5. Добавление графики

113

/З&навка изображений на ан/юшщы
С помощью программы Dreamweaver вставить изображение на страницу несложно.
Перед тем, как приступить к этому процессу, сначала сохраните страницу. Программе должен быть известен каталог, в котором эта страница находится, чтобы
правильно создать ссылку на изображение.
Чтобы поместить изображение в новый файл, выполните следующие действия.
1. Выполните команду File«=>New (Файл^Создать) для создания новой страницы.
2. В списке категорий выберите Basic Page (Простая страницы), а в списке Basic
Page —HTML
3. Щелкните на кнопке Create (Создать).
4. Выполните команду File^Save (ФайлСохранить), чтобы присвоить имя и сохранить новый HTML-файл в папке, которую вы выберете.
5. Если панель Properties Inspector (Инспектор свойств) не выведена на экран,
выберите команду Window^Properties (Окно«=>Свойства), чтобы открыть ее.
6. Щелкните на пиктограмме Image (Изображение) (в виде маленького дерева) панели Common Objects.
Откроется диалоговое окно Select Image Source (Выберите источник изображения),
как показано на рис. 5.2.

nav_buttofijver.jpg
Я? iogoOi.jpg
*? Iogo02.gi*
- we щ ЬашЯе ^ е desig», usdb^>- testkg,,. log assists, search
n g n e listing, training, * eseacch and щоге. To see examples o f my w o d c v e t
w

codchingnav.htm
whyabaro
berj.htmJ
bergjnde
Lfi.tedslatBs.htmi

Рис. 5.4. Чтобы окружить изображение текстом, вначале поместите изображение слева
Между текстом и изображением не должно быть пробелов
116

Часть II. Выглядит на миллион (даже по

Проще всего это сделать, если поместить курсор перед первой буквой текста, а затем
выбрать команду Inserts Image.
Не используйте пробелы или символы перехода на следующую строку между изображением и текстом.
2. Выберите изображение.
На панели Properties Inspector появятся атрибуты изображения.
3. На панели Properties Inspector выберите Left (Слева) в раскрывающемся списке Align (Выравнивание).
Изображение будет выровнено по левому краю, а текст автоматически его окружит,
как показано на рис. 5.5.
4vfSusannah Gardner's Resumef
Insert Modify Iext Commands £§t« Window
9

В4ш1я

I Hop Studios offers Web design. Macromedia Flash, HTML audip,
Шй Ч1н&ч> and all manner of WVb pf odijrsoit on a ft eeline** and project
kQ DWCunmes s
g analysis, search
Ш media
wages
engine Istibg, trasimg, reseaicb and moie 1 о see examples of'mv wotkJ
useatracef.htnii
index.htm!
lamovte.htmi
11 also teach, oofine atod »к11!ш^е£Уа Jotiroafism courses for widergrair№ lev-eb of
expencoce and leave with knowledge oftranies, taUes, cress-biow set coorpatibSit/. site
coachHngnav.htm
arclatectee and forais 'CGls as well as an excellent portfolio Web site Students v\ ho take d
whyabarofeoap.htn^
iouiiiaHsm ciasbfi explore audio video. ^и-&шшп2 Jbiajre niampuljijon and animaticnl
berg.htm!
- aS ю the context of Web stome&iB
bergjndex.html
urBtedstates.htmi
beautjWjSnde.html
boWtereynchtirt
sus«cooi2.htprf
5U8tecooU.html
hopst'/ie.css

J§iE

РИС. 5.5. Изображение выравнивается с помощью раскрывающегося списка Alig
erties Inspector
Для выравнивания изображения по правому краю страницы и размещения текста слева выполните пп. 1-2, а затем в п. 3 из раскрывающегося списка вместо Left выберите Right (Справа).
Чтобы текст не "прилипал" к изображению, щелкните на нем, найдите на панели
Properties Inspector текстовые поля V Space и Н Space (вертикальный и горизонтальный интервал) и введите числовое значение интервала в пикселях (10, как
правило, вполне достаточно).

Глава 5. Добавление графики

117

Создание сложного дизайна 6 помощью изображений
Опции выравнивания в HTML позволяют выравнивать изображения либо по вертикали,
либо горизонтали. Эти опции не позволяют с большой точностью расположить изображения
по отношению друг к другу или к тексту. Чтобы обойти данное ограничение, следует создать
HTML-таблицы и использовать их ячейки для управления размещением объектов. В главе 6
вы узнаете, как создавать таблицы. Для размещения элементов на странице также можно использовать слои и каскадные таблицы стилей (глава 8).
Вначале все вышесказанное может показаться сложным, но, немного поэкспериментировав, вы будете создавать с помощью таблиц почти любую разметку страницы.
В главе 9 обсуждаются методы использования таблиц для создания более сложного дизайна Web-страницы.

Новые функции Dreamweaver позволяют выполнить простое редактирование изображения, не открывая Fireworks или любой другой графический редактор. Все эти средства появляются на панели Properties Inspector при выборе изображения (рис. 5.6).

РИС. 5.6. С помощью средств обрезки, изменения яркости, контраста и резк
ties Inspector можно редактировать изображения, не покидая Dreamweaver
Вы также найдете две кнопки, позволяющие использовать Macromedia Fireworks для редактирования изображений. По щелчку на кнопке Edit (Редактировать) запускается Fireworks
и в главном окне программы открывается выбранное изображение, что значительно упрощает
использование функций Fireworks для редактирования. Интеграция этих дцвух программ означает, что при сохранении изменений, внесенных в изображение, эти изменения также влияют на
страницу в Dreamweaver. Новая кнопка, расположенная справа от кнопки Edit необходима для
быстрой и простой оптимизации изображения, что ускорит ее загрузку с узла. Функции Edit
и Optimize in Fireworks (Оптимизировать в Fireworks) более подробно описаны в главе 10.
Перед тем, как начать редактировать изображения, запомните, что Dreamweaver— это,
прежде всего приложение для создания Web-страниц, а не графический редактор. И, несмотря на то, что эти средства очень полезны, они не могут заменить такие графические редакторы, как Fireworks и Photoshop при серьезной работе над графикой.
Используя средства для обрезки, изменения яркости, контраста и резкости, не забывайте, что вы изменяете само изображение, а не его копию. Поэтому, перед тем
как сохранить свою страницу, убедитесь, что вы действительно удовлетворены изменениями, которые были внесены. Конечно, можцо воспользоваться отменой
операции, чтобы вернуться на несколько действий назад, но после сохранения
страницы изменения, внесенные в изображение, отменить уже будет невозможно.
Чтобы обезопасить оригинальное изображение, перед тем, как приступить к изменениям, лучше всего сохранить его копию.

118

Часть II. Выглядит на миллион (даже п

Обрезка изображения
Обрезка необходима для точной подгонки изображения. Чтобы обрезать графику или фотографику выполните следующие действия.
1. В окне документа щелкните на изображении, которое необходимо обрезать.
На панели Properties Inspector появятся свойства изображения.
2. Из пиктограмм редактирования выберите средство Crop (Обрезать)*
Откроется диалоговое окно с предупреждением, гласящим, что будет изменено оригинальное изображение.
Не вносите никаких изменений, если вы не уверены в необходимости сохранения
оригинального изображения. Бели вы сомневаетесь, сделайте копию изображения
и вносите изменения в нее.
\

3.

•

Щелкните на кнопке ОК.
На изображении появится пунктирная линия с метками-манипуляторами.

4. С помощью меток-манипуляторов отметьте область изображения, которую необходимо сохранить.
Затемненная часть изображения (рис. 5.7) после обрезки будет удалена.
Пунктирная линия обрезки
Ейе

Edit V««w

invert Modify

3>xt

Command* £it*

Vtfndow

Функция обрезки

Рис. 5.7. Функция Crop позволяет редактировать фотографию, не покидая Dreamweaver
В этом примере показано, как определить область, которую необходимо сохранить

Глава 5. Добавление графики

119

5. Дважды щелкните внутри окна или нажмите клавишу .
Изображение будет обрезано.
Можно отменить обрезку, выбрав Edit^Undo, но не забывайте, что после того, как
страница будет сохранена, изменения навсегда будут внесены в изображение и их нельзя
будет отменить.

Изменение яркости и контраста
Изменение яркости изображения позволяет вам изменить общее количество света в изображения. Контраст отвечает за разницу между темными и светлыми областями изображения.
Чтобы изменить яркость и контраст, выполните следующие действия.
1. В окне документа выберите изображение, которое требуется изменить.
На панели Properties Inspector появятся свойства изображения.
2. Из пиктограмм редактирования выберите пиктограмму Brightness and Contrast (Яркость и контраст) (круг из темной и светлой половинок).
Откроется диалоговое окно с предупреждением об изменении оригинального файла.
3. Щелкните на кнопке ОК.
Откроется диалоговое окно Brightness/Contrast.
4. С помощью ползунков измените яркость и контраст изображения.
Если вы сразу хотите увидеть, как изменения повлияли на изображение при перемещении ползунков, установите флажок Preview (Предварительный просмотр).
5. Щелкните на кнопке ОК.
После сохранения страницы изменения навсегда будут внесены в изображение.

Изменение резкости изображения
При изменении резкости изображения увеличивается разница между цветовыми областями. Эффект может заключаться в увеличении четкости форм и линий изображения. Чтобы
изменить резкость, выполните следующие действия.
1. В окне документа выберите изображение, резкость которого необходимо изменить.
На панели Properties Inspector появятся свойства изображения.
2. Из пиктограмм редактирования выберите пиктограмму Sharpen (Резкость)
(синий конус).
Откроется диалоговое окно с предупреждением об изменении оригинального файла.
3. Щелкните на кнопке ОК.
Откроется диалоговое окно Sharpen.
4. С помощью ползунка измените резкость изображения.
Если вы сразу хотите увидеть, как изменения повлияли на изображение при перемещении ползунка, установите флажок Preview (Предварительный просмотр).
5. Щелкните на кнопке ОК.
Резкость изображения будет изменена, а при сохранении страницы эти изменения
нельзя будет отменить.

120

Часть //. Выглядит на миллион (даже по

JlCfitoic с п/гоз/гаънмм QJ?-изображением.
Вы бы удивились, если бы я предложила вам поместить невидимое изображение на Webстраницу, но именно этим мы и займемся далее. Небольшой прозрачный GIF — это мощный
элемент дизайна Web-страницы, так как его можно использовать для управления точным расположением других элементов страницы. Вы увидите, что некоторые другие программы, например, Fireworks, также используют прозрачные изображения, чтобы привести в порядок другие элементы страницы. Такие GIF-изображения создаются автоматически, их
легко узнать по именам: s h i m . g i f , c l e a r . g i f или s p a c e r . g i f . Однако, независимо от
названия, они служат для выполнения одной и той же цели.
Если вы решили самостоятельно создать прозрачный GIF, постройте небольшое одноцветное изображение, сохраните его как GIF и назначьте прозрачный цвет. Такой цвет можно
создать в большинстве графических редакторов, в том числе Adobe Photoshop и Fireworks.
В начале этой главы описывались программы, в которых вы найдете данную функцию.
Язык HTML позволяет определить любую высоту я ширину изображения, независимо
от его реальных размеров. Таким образом, можно использовать небольшой прозрачный
GIF с, соответственно, небольшим размером файла (для быстрой загрузки), а затем изменить атрибуты высоты и ширины, чтобы создать точный интервал между другими видимыми элементами страницы. Многие Web-дизайнеры для этих целей рекомендуют создавать изображение всего в один пиксель, но я считаю, что лучше всего работает изображение в 10x10 пикселей, так как его легче найти и выделить, после того, как оно будет
помещено на страницу в Dreamweaver. И не забывайте, что даже если реальный размер
GEF — 10x10 пикселей, его всегда можно уменьшить.
Использовать прием прозрачного GIF в программе Dreamweaver очень просто, так как атрибуты высоты и ширины находятся прямо на панели Properties Inspector. Также может понадобиться определить выравнивание изображения, чтобы добиться требуемого эффекта.
Прозрачный GIF также используется для управления интервалами в тексте. Этот метод
применяется при установлении не только расстояния между строками текста или других элементов, но и большего отступа, чем дает дескриптор параграфа. Данный прием также идеально подходит для создания большего расстояния между элементами на пиксельном уровне.
Чтобы воспользоваться прозрачным GIF между изображениями, текстом или другими
элементами страницы, выполните следующие действия.
1. Вставьте изображение либо в пространстве между другими изображениями,
либо в тексте.
2. Щелкните на кнопке ОК.
Прозрачный GIF будет вставлен на страницу и автоматически выбран.
3. При выбранном изображении c l e a r . g i f введите 20 в текстовое поле W на панели Properties Inspector и 20 — в текстовое поле Н, расположенное чуть ниже.
Таким образом устанавливается ширина и высота изображения в 20 пикселей.
Я использовала значение 20 просто для примера, вы же можете ввести любые другие размеры.
Если щелкнуть на изображении c l e a r . gif, то станут видны его контуры. Обратите
внимание на следующее: если снять подсветку, изображение в программе Dreamweaver
сразу станет невидимым. Правда, его всегда можно снова выбрать— щелкайте мышью вокруг до тех пор, пока курсор не попадет на него.

Глава 5. Добавление графики

121

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

Создание фона
Фоновые изображения оживляют Web-страницу, добавляя в нее цвет и полноту. Разумно используемое изображение помогает создать иллюзию, будто вся страница является одним
большим рисунком, тем не менее загружающимся быстро и эффективно. Фокус заключается
в следующем: небольшое фоновое изображение создает впечатляющий эффект, повторяясь,
как мозаика, по всей странице вниз и в стороны (рис. 5.8).
F i l e

E d H

Q^

V i e w

F a v o r i t e »

T o o t e

H e l p

l

о • li й п />*-*

- ,, " * '
" - • '• " - * '•- ' • - - > ,.
_ u
:.^.:
лл
T^Lb^
д
Acdtr«!|j(J Settings\2V4y Docuwente\1.23 hopstuck>s\>anine wynerVireatnweaverfardunwit»^aeen«hottV»d» pagesУя^веоооЛ>НЫ[|
ч

:

П Ш

W
h
e
n
u
s,edthsiasgraa
b
a
c
k
g
o
r
u
n
d
preh
c
ie
e
tla
ispre
p
e
a
e
t
d
y
l
t
o
c
a
t
atern.

РИС. 5.8. В этом примере представлены возможности фонового изображения, которое
всю страницу, подобно мозаике
Фоновые изображения часто называют мозаикой, так как они повторяются, как
мозаичная плитка на полу в ванной. Однако, если использовать длинное и узкое
изображение в качестве фона или просто крупное изображение, размер файла которого невелик, можно создать много различных эффектов, помимо просто повторяющейся мозаики.
При работе с фоном можно воспользоваться следующим приемом с прозрачным GIFизображением. Если поместить графическое изображение поверх узорного фона, вы получите
квадратную область вокруг графики, и это испортит узор, как показано на рис. 5.10. Чтобы

122

Часть И.

ВЫГЛЯДИТ на МИЛЛИОН (даже по

фон был виден, например, вокруг заголовка, создайте изображение заголовка поверх цвета,
приблизительно совпадающего с доминирующим цветом фона. При сохранении GIF назначьте этот цвет прозрачным. Если теперь вы поместите заголовок на страницу, он будет "парить"
над узорным фоном (рис. 5.11).
Учтите, что определенный фон может затруднить чтение текста, набранного поверх него (как показано на рис. 5.9). Поэтому внимательно выбирайте фоновые
изображения, кроме того, создайте достаточный контраст между фоном и текстом, который и так нелегко читать с экрана компьютера.

Й C:pou*nenband Setngs2
\V^¥ OocunentsL
\ 23 hopstudtos^anme wwnerd
\reamwe*ver for

Pffc. 5.9. Использование неправильного фона может привести к невозможности чтения
Web-страницы
Если вы не хотите использовать узорный фон, то вам остается только воспользоваться изображением, которое по размеру будет больше, чем самый большой монитор у посетителей вашего узла. Таким образом, он никогда не увидит следующую часть мозаики,
так как она будет находиться за пределами видимости. Иногда я создаю фоновое изображение с разрешением 120041600 пикселей. В данном случае главное — сохранить
небольшой размер файла изображения. Фоновые изображения с таким разрешением хорошо работают только в формате GIF с небольшим числом цветов. Формат JPEG для
этой цели не подходит. Так как в GIF используется небольшое количество цветов, размер файла остается небольшим, несмотря на то, что разрешение огромно. GIF с восемью
цветами обычно занимает не более нескольких килобайт. И чем меньше цветов будет
использоваться, тем меньшим будет размер файла.

Глава 5. Добавление графики

123

0*
looksUkeftayne:
Fattf^
File Edit V i e w
Favorites Tools

Help

J[ С Oocj^S'->ts and Settirgs\2^t/ Doc-ments\l23

Рис. 5.10. Обычные GIF- и JPEG-изображения всегда имеют прямоугольную форму, ко
плохо смотрится на узорном фоне
File

Edit

View

Favorites

Toofs

Help

4% http: /wvw.pattjrByne.com/

Рис. 5. / /. /7осле гого, как белый цвет вокруг заголовка был сделан прозрачным, изображен
расположилось над фоном

124

Часть II. Выглядит на миллион (даже п

Чтобы установить фоновое изображение на Web-странице, выполните следующие действия.
1. Выберите команду Modify^ Page Properties (Изменить>=>Свойства страницы).
Откроется диалоговое окно Page Properties, как показано на рис. 5.12.

Рис. 5.12. В диалоговом окне Page Properties можно установить
фоновое изображение, а также цвета фона, текста и ссылок
2. В списке категорий слева выберите пункт Appearance (Вид).
3. Щелкните на кнопке Browse (Просмотр) справа от текстового поля Background
Image (Фоновое изображение).
Откроется диалоговое окно Select Image Source (Выберите источник изображения).
4. Найдите изображение для использования в качестве фона.
При вставке изображения на Web-узел нужно убедиться, что оно находится в том же
относительном месте жесткого диска, что и на сервере. Если вы планируете использовать свою мозаику по всему узлу, сохраните ее в общей папке для изображений, откуда
можно подключить ее к любой странице узла. Более подробно организация файлов
с изображениями описана в главе 3.
5. Дважды щелкните на имени файла фонового рисунка, чтобы выбрать его.
Диалоговое окно Select Image Source закроется.
6. Щелкните на кнопке ОК в диалоговом окне Page Properties.
Обратите внимание на следующее: если вы щелкнете на кнопке Apply (Применить), то
увидите, как на странице появится фоновая мозаика, а диалоговое окно Page Properties останется открытым.

Создание tcafitn изображений
Карты изображений очень популярны в World Wide Web, так как позволяют создавать
"горячие" точки на изображении и соединять их с различными URL-адресами. Чаще всего
карты изображений используются в географических картах (например, на карте вашей страны
даются ссылки на различные страницы в зависимости от выбранного пользователем места).
Например, если вы представляете Национальный банк и хотите, чтобы клиенты могли легко
найти локальное отделение или банкомат, то можете создать "горячие" точки на карте страны
и присоединить каждую из них к списку банков в данном географическом регионе. С помо-

Глава 5. Добавление графики

125

щью программы Dreamweaver строить карты изображений довольно просто, так как в ней находится набор средств для рисования, что позволяет создавать "горячие" точки и устанавливать в них соответствующие ссылки.
Чтобы создать карту изображения, выполните следующие действия.
1. Разместите изображение, которое будет использоваться в качестве карты, на
странице.
2. Выберите изображение.
В окне Properties Inspector появятся его свойства.
3. Чтобы нарисовать "горячую" точку, укажите одну из опций средств Image Map
(Карта изображения) в левом нижнем углу панели Properties Inspector (рис. 5.13).

med»
BE? Й>
Ш

mages
useatracer.htmi
ndex.htm)

Ш,

lemow.htmi
flashnav.html

Рис. 5.13. Щелкните на любом изображении, чтобы увидеть на панели Properties Inspec
средства для создания карты изображения
В средства создания карты изображения входят прямоугольник, овал и неправильный
многоугольник. Эти средства позволяют обвести области вашего изображения, называемые "горячими " точками, и присвоить каждой из них свою ссылку.
4. При выбранной форме, щелкните мышкой и обведите область изображения, которую нужно сделать "горячей" (здесь будет находиться ссылка на другую страницу). Ниже указаны различия между средствами Image Map.
• Прямоугольник. При обведении "горячая" область подсвечивается голубым цветом. Эта подсвеченная область станет активной. Если вам понадобится изменить
ее местоположение, щелкните на кнопке с черной стрелкой в левом нижнем углу

126

Часть II.

ВЫГЛЯДИТ на МИЛЛИОН

(даже по

панели Properties Inspector, затем выберите и переместите область в требуемую
часть. Также можно изменять ее размер, перетащив за углы.
• Овал. Работает практически так же, как и прямоугольник—просто щелкните
и нарисуйте. Чтобы изменить размер овальной "горячей" области, щелкните на
кнопке с черной стрелкой и перетащите один из квадратиков на ее сторонах.
• Многоугольник. Это средство функционирует немного иначе. Чтобы создать
многоугольную область (такую, как штат Калифорния на ка^те США), щелкните
на изображении для каждого угла рисуемой фигуры. Вы сможете замкнуть фигуру, если после того, как все остальные точки углов будут отмечены, снова щелкнете на первой нарисованной точке. С помощью кнопки с черной стрелкой можно
изменить размер многоугольника или переместить любой из его углов.
5. Чтобы присвоить "горячей" области ссылку, щелкните на пиктограмме Folder
(Папка) напротив текстового поля Link (Ссылка) — в верхней части панели
Properties Inspector.
Откроется диалоговое окно Select File (Выберите файл).
6. Найдите HTML-файл, который вы планируете присоединить к "горячей" точке
изображения.
7. Дважды щелкните на файле, который требуется присоединить.
"Горячая" точка будет подключена к выбранной странице, а диалоговое окно Select
File автоматически закроется. Также можно ввести путь прямо в текстовое поле. Если
вы знаете его, то вам не придется искать файл на жестком диске.
8. Чтобы добавить следующие "горячие" точки, выберите одну из фигур и повторите пп. 4-7.
9. Для присвоения карте имени введите его в текстовом поле Map (Карта) — сразу
над фигурами для карт.
Имена карт указывают на отличия между ними, особенно, если их несколько на одной
странице. В отношении имени — выбор за вами.
После завершения вы увидите "горячие" точки вашей карты в виде голубых областей.
Вы всегда можете вернуться и отредактировать карту изображения, выбрав ее голубую область, а также, перетащив края, изменить размер или ввести новый адрес
URL для изменения ссылки.

Глава 5. Добавление графики

127

Часть III

Улучшение узла

Команда визуальной Web-разработки

о н

ОН

W A O ^ O

НА

t^O

''•ТШ'^'г'-^^®
Если вьг решили создать ос
вил ЙТ^,ф^спо : льз^есь

_

-.J™™.

ных на фреймц страри!^ рщакбм^ё^ CJBQ
скол4^€8&|х|еди ваэйой :и
дизайна, компания Macromedia
^ ^
. свойств-в" Dreamweaver MX 2004.' : -Г^

Глава 6

Знакомство с HTML-таблицей
/3 atiiou главе...
> Знакомство с HTML-таблицами
>

Взгляд за пределы электронных таблиц

> Изменение структуры таблицы
> Создание сложного дизайна

ШДизайнеры часто расстраиваются, когда узнают, что нельзя поместить изображение
^ С ^ в определенную часть страницы, просто перетащив его туда. Также не может нравиться отсутствие управления междустрочным интервалом в тексте и многих других свойств
дизайна, часто использующихся в печати.
Несмотря на то, что разработка HTML ведется постоянно и сейчас мы имеем гораздо
больше возможностей, рекомендуем управлять дизайном всеми распознаваемым HTMLкодом, а именно HTML-таблицами. Этот прием хорошие дизайнеры применяют в World Wide
Web уже многие годы, и он отлично работает до сих пор. Недостаток таблиц заключается
в сложности их создания, так как приходится сливать и разделять ячейки, чтобы разместить
элементы в нужных местах. К счастью, Dreamweaver обладает огромным количеством
средств, которые помогают при создании таблиц.
В этой главе рассказывается об использовании HTML-таблиц (начиная с информации,
разбитой на столбцы, до сложного дизайна страницы). Вы ознакомитесь с широким спектром
областей использования HTML-таблиц и пошаговыми инструкциями для создания различных
типов дизайна Web-страниц.

Жа&ищы или CSS-слои?
В спецификации HTML 4.0 слои были добавлены в стандартный набор HTML-кода. Их гораздо
легче создавать, чем таблицы, особенно в Dreamweaver, где можно просто перетащить их в любую
часть страницы. После этого в слой можно поместить любой элемент, будь то изображение,
текст или мультимедиа-файл. Слои допускается даже накладывать один на другой. Таким образом достигается настоящее попиксельное управление дизайном, чего нельзя добиться от таблиц.
Почему же не все используют слои? Дело в том, что старые браузеры их не поддерживают,
более того, даже новые не всегда одинаково отображают слои и их содержимое. (Под старыми
браузерами я подразумеваю Netscape 4.0, Explorer 4.0, а также их более ранние версии.) Итак,
с одной стороны, благодаря слоям мы получаем простое управление дизайном, но с другой —
рискуем, что кто-то со старым браузером не сможет увидеть вашу работу так, как вы ее задумывали. А человек с очень старым браузером, вообще ничего не увидит, так как слои и все, что
в них содержится, не будет выводиться на экран. Поэтому довольно часто дизайнеры не рискуют, и таблицы остаются одним из основных дизайнерских средств в World Wide Web.
Но в связи с тем, что слои гораздо проще использовать, чем таблицы, многие дизайнеры
перешли к слоям. По этой причине все чаще и чаще встречаются страницы, спроектированные

на основе слоев, и все больше пользователей переходит к версии 5.0 и выше браузеров
Netscape и Internet Explorer, которые поддерживают слои.
Ваше решение относительно использования слоев должно учитывать, прежде всего, аудиторию разрабатываемого узла. Просмотрите журнал статистики с вашего сервера и определите, какие версии браузеров используют посетители (поставщик услуг или системный администратор могут вам предоставить эту информацию). На многих крупных узлах менее 5% пользователей все еще используют браузеры версии 4.0 и ниже, и поэтому многие дизайнеры
считают, что 5% их посетителей не сможет нормально увидеть их узлы. Но аудитория может
быть разной, и вам необходимо решить, каким ее процентом вы можете пожертвовать, чтобы
воспользоваться преимуществами слоев.
Если вы хотите получить контроль над дизайном и создать более универсальные
Web-страницы, таблицы для этой цели подойдут как нельзя лучше.

Если вы когда-либо пользовались издательской программой (например, QuarkXPress или
Adobe PageMaker), то, вероятно, знакомы с окнами для текста и изображений, необходимыми
при разметке страницы. Слои работают аналогично, однако даже с помощью таблиц можно добиться подобного эффекта. Ячейки таблицы ("окна", создающиеся при пересечении каждой
строки и столбца таблицы) можно использовать для управления размещением текста и изображений. А так как допускается делать границы таблицы невидимыми, посетители при просмотре
вашей Web-страницы в браузере не увидят лежащей в основе структуры. Например, вы вправе
использовать таблицу для выравнивания элементов с разных сторон страницы и создать колонки текста. Конечно, это не дает такого же удобства при управлении дизайном, как в издательских программах, но, немного потрудившись, можно добиться подобных результатов.
Вы можете поступить и по-другому. Создайте дизайн с помощью слоев, а затем воспользуйтесь функцией автоматического преобразования слоев в таблицы, чтобы получить страницы, построенные на базе таблиц. Однако, используя эту функцию, будьте внимательны. Преобразование — это не идеальный процесс, так как некоторые действия, которые можно выполнить со слоями (например, перекрыть один слой другим), недоступны таблицам.
Более подробно слои описаны в главе 9.

Создание nfioctninxtfia&iuu,в /гежиме
Все таблицы состоят из трех базовых элементов: строк, столбцов и ячеек. Если вы когдалибо работали с электронными таблицами, то знаете, как они выглядят. Однако таблицы
в HTML отличаются от электронных тем, что они используются для более сложного размещения
данных, которое требует слияния и разделения многих ячеек. Тогда, когда приходилось создавать Web-страницы вручную, используя "сырой" HTML-код, построить даже простые таблицы
было довольно сложно. Код за HTML-таблицей является сложным набором дескрипторов
и , которые определяют строки и ячейки таблицы. Вычисление того, как ввести эти дескрипторы, чтобы создать серию небольших окон на Web-странице, никогда не было элементарным процессом. Поэтому, если вам необходимо соединить или разбить ячейки для создания нечетного количества строк или столбцов, вы сталкиваетесь с очень непростой задачей.
Слава кибер-богам! Теперь у нас есть Dreamweaver, который значительно упрощает этот
процесс. Если вы когда-либо писали HTML-код вручную, то оцените, насколько проще и быстрее с помощью программы Dreamweaver изменить внешний вид и структуру таблицы, просто перетащив различные элементы. В ячейку допускается вставлять любое содержимое, будь

132

Часть III. Улучшение

то изображение, текст или мультимедиа-файл. Также несколько изменить цвет фона, границы
и выравнивание элементов ячейки. И главное, можно избежать самой коварнойловушки дизайна таблиц: существует возможность изменить ее вид уже после того, как она была построена.
Проще всего работать в программе Dreamweaver с таблицами в режиме Layout (Макетирование) и пользоваться специальными функциями Layout Cell (Макет ячейки) и Layout Table
(Макет таблицы) (как ими пользоваться, вы узнаете из последующих инструкций). С помощью этих функций, которые, кстати, доступны только в режиме Layout, создание таблицы
проходит без особых сложностей. При этом можно даже переключаться между режимами
Standard (Стандартный) и Layout. Вы уже работали в режиме Standard ранее, так как это
режим, включенный в Dreamweaver по умолчанию при редактировании документов. Режим
Layout разработан специально, чтобы помочь разработчику в построении и редактировании
таблиц. Он позволяет рисовать ячейки в любой части страницы, а также перетаскивать края
таблицы с целью изменить ее размер. На рис. 6.1 и 6.2 изображена одна и та же таблица в режимах Layout и Standard, соответственно. Определить, в каком режиме вы находитесь,
можно, если взглянуть на выведенную в окне Dreamweaver таблицу или по состоянию пиктограмм Layout и Standard на панели Layout.

l s (fables exampe
l s*Tabe
l .htm*)J
i Macromeda
i Dreamweaver MX ?0T
0abe
Ш#1^!?^^^?^^

IIS

^^U<

%!*r . .,.„ 1шШтШШк
Layout mode [cxitj

Tables can be used to create headings and columns
! This column area is really just a
1 table cell
•1

This is another table cell. The one in the
middle was automatically inserted when I . ; - -used die layout feature to create this one
Had this been a real Web page design, I
might have created these two cells more
- precisely. They look better if they are the
same size.

jj
+2

4j v + - .. - .

—

263 «

- -•

•яиш

Рис. 6,1. Режим Layout позволяет создавать и редактировать таблицы в програм
Чтобы создать таблицу в режиме Layout с широкой ячейкой вверху и двумя небольшими
ячейками внизу (как в таблице, изображенной на рис. 6.1 и 6.2), выполните следующие действия.
1. Создайте новую HTML-страницу.
Для этого выберите File^New, затем перейдите к пункту Blank Page в списке категорий и пункту HTML в списке Basic Page.

Глава 6. Знакомство с HTML-таблицей

133

Вставить макет таблицы Создать макет ячейки
Режим макетирования
Расширенный режим

Вставить строку сверху
Вставить строку снизу

Стандартный режим

Вставить столбец слева

Нарисовать слой

Вставить столбец справа

Вставить дескриптор DIV

Вставить фреймы
1

Вставить таблицу

* 'uwutv- y ; f 0 f

Вставить табличные данные

ш

тп,

гт тт

«
Mw

1

Tables can be used to create headings and columns
|[bis coiumn area is realty just a
bble cell

|ftiis is another table cell The one in t h e " "
imddle was automatically inserted when I
jused the layout feature to create this one.
Had this been a real Web page design, I
blight have created these two cells more
precisely. They look better if they are the

-

Рис. 6.2. Обратите внимание, что в режиме Standard на панели Properties Inspector появляе
больше опций для редактирования. В этом режиме также можно создавать и редактировать
2. Переключитесь в режим Layout, щелкнув на кнопке Layout (Макет), которая
находится немного левее от пиктограммы Layout Table на панели Layout
В этот режим вы также переключитесь, если выберете команду
Vlew1^ Layout View (Вид^Режим таблицы 1 ^Режим макетирования).

View^Table

На экране может появиться сообщение, в котором будет объясняться, как пользоваться
кнопками Layout Table и Layout Cell, если этот режим,включается впервые. Установите
флажок Don't show me this message again (Больше не выводить это сообщение), чтобы
не видеть данное сообщение в будущем, и щелкните на кнопке ОК с целью закрыть его.
3. Щелкните на кнопке Draw Layout Cell, которая находится на панели Layout
Вид курсора изменится на крестик при попадании на область документа, после чего
можно приступать к рисованию ячейки таблицы.

134

Часть III. Улучшение

4. Щелкните на документе и, удерживая кнопку, перемещайте мышь, рисуя прямоугольник в верхней части страницы. Это будет первая ячейка (см. рис. 6.1).
После этого ее автоматически окружит остальная структура таблицы с текущей ячейкой, отмеченной белым цветом.
5. Под только что нарисованной ячейкой нарисуйте еще одну, приблизительно на
полразмера меньше. Для этого повторно нажмите кнопку Draw Layout Cell,
щелкните под первой ячейкой и, перетаскивая мышь, нарисуйте новую ячейку.
При этом ячейка "перепрыгнет" на свое место в соответствии с линиями сетки таблицы. Воспользуйтесь этой сеткой, чтобы выровнять ячейки.
6. Теперь нарисуйте третью ячейку справа от второй.
7. Щелкните мышью в первой ячейке и введите какой-нибудь текст. Сделайте то
же самое в других ячейках.
Можете ввести любой текст. Вы должны убедиться, что в ячейку можно вводить текст
точно так же, как и в любой другой части страницы.
8. Переключитесь в режим Standard View, щелкнув на кнопке Standard или выбрав команду View«=>Table View«=>Standard Mode, чтобы увидеть, как выглядит
ваша таблица.
В зависимости от того, где вы начали рисовать ячейки, Dreamweaver может создать вокруг них другие ячейки таблицы, чтобы сохранить их положение на странице. Например,
в таблице, изображенной на рис. 6.1 и 6.2, несмотря на то, что я создала три новые ячейки,
Dreamweaver автоматически заполнила свободные места, нарисовав дополнительные ячейки.
Теперь общее их количество — семь. Обычно по умолчанию таблица располагается ближе
к верхнему левому углу страницы, то есть первые ее ячейки находятся в верхнем левом углу.
Однако в режиме Layout можно нарисовать ячейки в любой части страницы, a Dreamweaver
автоматически создаст остальную таблицу, необходимую для сохранения их положения.
Помните, что HTML не предоставляет свободы действий при размещении элементов страницы, если вы не используете ячейки таблицы для контроля их положения. Именно поэтому
необходимы пустые ячейки, созданные программой для заполнения таблицы, которые играют
роль разделителей. Их не видно в браузере, в результате чего создается впечатление, будто
несколько элементов независимо располагаются в произвольной части страницы.
Дизайнеры часто интересуются, насколько широкими следует делать таблицы.
Во-первых, советуем проектировать страницы для разрешения экрана 800x600,
так как оно чаще всего сегодня используется в Web. И если вы создаете таблицу,
которая покрывает всю отображаемую область, будет безопаснее не превышать
ширину таблицы в 760 пикселей и поместить ее по центру страницы, так как
в этом случае с каждой ее стороны остается еще немнрГо места и предотвращается появление горизонтальных полос прокрутки.

/на£сиц в/гежиме Calf out
Самым замечательным при работе с таблицами в режиме Layout является то, что можно
пользоваться разметочной сеткой для редактирования, перемещения и изменения размера
любой строи, столбца и ячейки таблицы, что позволяет использовать сетку при дизайне
и создавать любой тип разметки.
Обычно единственным способом создания сложных макетов в HTML является методичное построение сложных таблиц. Но в режиме Layout можно перемещать ячейки по сетке

Глава 6. Знакомство с HTML-таблицей

135

простым перетаскиванием и точно размещать текст или изображения, не создавая для этого вручную разделительных ячеек. Эта функция не так хороша, как слои, но она подошла
к ним довольно близко.
Для еще большего контроля над разметкой также можно создавать вложенные таблицы
(таблицы, нарисованные внутри других таблиц). Чтобы построить вложенную таблицу,
просто щелкните на кнопке Draw Layout Table и начните рисовать таблицу в существующей ячейке. Более подробную информацию о вложенных таблицах ищите в разделе
"Использование вложенных таблиц" далее в этой главе.

использование режима Sxfianded
Третьим режимом редактирования таблиц является режим Expanded Table (Расширенная таблица). Чтобы перейти в него, выполните команду View^Table Mode1^
Expanded Table Mode (Вид^Режим таблицы^Режим расширенной таблицы).
В этом режиме гораздо проще выбирать элементы таблицы и за ее пределами
(иногда бывает сложно выбрать элемент таблицы, особенно если вы еще не достаточно владеете мышкой). Если вы спешите или работаете с большим количеством
ячеек, этот режим значительно облегчит вам жизнь.
Однако следует быть внимательным, так как для того, чтобы помочь вам, Dreamweaver
увеличивает размер таблицы в окне просмотра, и, таким образом,#таблица становится гораздо
больше, чем на самом деле. В результате страница, просмотренная в браузере, выглядит немного по-другому. Поэтому обязательно просматривайте свою работу в режиме Standard,
а еще лучше — в браузере, чтобы удостовериться, что она будет хорошо смотреться в Internet.

Опции tfta&iuu,bi
Режим Layout наиболее подходит для создания и редактирования общей структуры таблицы. Но когда приходит время редактировать ее содержимое и содержимое отдельных ячеек, советуем воспользоваться режимом Standard или новым режимом Expanded, который
описан в предыдущем разделе. В режиме Layout, конечно, можно изменить некоторые атрибуты таблицы, но в Standard предоставляется возможность изменить все, включая число
строк и столбцов, а также высоту, ширину, размер границы и интервалы.
Когда вы выбираете таблицу или ее ячейку, атрибуты появляются на панели Properties
Inspector, которая находится в нижней части рабочей области. Щелкните на границе любой
таблицы, чтобы выбрать ее, и на панели Properties Inspector будут отображены опции таблицы, показанные на рис. 6.3. Чтобы просмотреть все опции, щелкните на кнопке расширения (со стрелкой) в левом нижнем углу панели Properties Inspector.
Также в ячейки вы вправе вставлять текст, изображения и мультимедиа-файлы. Для этого
следует поместить в определенное место курсор и ввести текст или же с помощью опций панели
Insert Common Objects вставить изображения, мультимедиа-файлы и другие элементы.
*Ь

Иногда выбрать таблицу, используя мышь, может быть довольно сложно. Поэтому представим вашему вниманию ряд приемов, упрощающих выполнение
этого процесса.
'

136

Выбор простой таблицы. Чтобы увидеть свойства таблицы, в режиме
Standard щелкните на верхней границе таблицы. Этот прием хорошо работает для простых таблиц.

Часть III. Улучшение

Рис. 6.3. На панели Properties Inspector можно изменять атрибуты выбранной
Выбор вложенной таблицы. Во вложенных таблицах содержится немало путающих границ, которые соприкасаются друг с другом. Щелкните внутри любой ячейки той таблицы, которую вы хотите выбрать, а затем щелкните правой кнопкой и выберите Tabled Select Table (Таблица^Выбрать таблицу).
Выбор всей таблицы. Чтобы выбрать сразу всю таблицу, воспользуйтесь селектором HTML-дескриптора строки Status в нижней части рабочей области. Чтобы
в строке Status появились HTML-дескрипторы, щелкните в любой части таблицы. Вы сможете выбрать всю таблицу, если щелкнете на дескрипторе .
На панели Properties Inspector представлены следующие опции таблицы, необходимые
для изменения ее внешнего вида.
Table Id. Текстовая область, в которую можно вставить название таблицы.
' Rows. Указывается число строк в таблице. Размер таблицы можно изменить,
введя другое число. Однако будьте внимательны, так как при уменьшении
существующего числа Dreamweaver удалит нижние строки вместе со всей находящейся в них информацией.
' Columns. Указывается число столбцов в таблице. Размер таблицы можно
изменить, введя другое число. Но опять же, будьте осторожны, так как при
уменьшении существующего числа Dreamweaver удалит столбцы с правой
стороны таблицы вместе со всей находящейся в них информацией.
' W (Width). Указывается ширина таблицы. Размер таблицы можно изменить,
введя другое число. Ширину допускается указывать как в процентах, так

Глава 6. Знакомство с HTML-таблицей

137

и в пикселях. Значения, выраженные в процентах, уменьшают или увеличивают размер таблицы в зависимости от размера окна браузера пользователя.
S H (Height). Указывается высота таблицы. Ее размер можно изменить, введя
другое число. Высоту также позволяется указывать как в процентах, так
и в пикселях. Значения, выраженные в процентах, уменьшают или увеличивают размер таблицы в зависимости от размера окна браузера пользователя.
Этот атрибут распознают браузеры только версии 4.0 и выше.
S Cell Pad. Указывается интервал между содержимым ячейки и ее границей.
S CellSpace. Указывается интервал между ячейками таблицы.
S Align. Управляет выравниванием таблицы. Возможные опции — left (по левому краю), right (по правому краю) и center (по центру).
S Border. Указывается размер границы вокруг таблицы. Чем больше число, тем
толще граница. Если вы хотите, чтобы границу не было видно, введите значение 0.
Class. Предоставляется простой доступ к опциям таблиц стилей. (CSS описываются в главе 9.)
S Clear и Convert. Пиктограммы в нижнем левом углу панели Properties Inspector
(щелкните на кнопке расширения в нижнем правом углу, чтобы их увидеть)
предоставляют следующие опции форматирования:

V

•

Clear Row Heights (Сбросить значения высоты строк) и Clear Column Width
(Сбросить значения ширины столбцов), которые позволяют удалить сразу все
значения высоты и ширины, оставляя за таблицей управление окном браузера;

Convert Table Heights to Pixels (Преобразовать высоту таблицы в пиксели), Convert Table Heights to Percents (Преобразовать высоту таблицы в проценты), Convert Table Widths to Pixels (Преобразовать значение ширины таблицы в пиксели) и Convert Table Widths to Percents
(Преобразовать значение ширины таблицы в проценты) — позволяют автоматически преобразовать параметры высоты и ширины в пиксели, определив фиксированный размер, или в проценты, после чего таблица автоматически занимает определенный процент окна браузера.
Размеры таблицы, выраженные в процентах, позволяют создать таблицу, размер которой изменяется при изменении размера окна браузера. Если вы хотите, чтобы таблица всегда занимала 75% этого окна (независимо от величины
монитора пользователя), то процентное соотношение в качестве размера подойдет как нельзя лучше. Если необходимо, чтобы таблица всегда занимала
определенное число пикселей (т.е. оставалась одинаковой независимо от разрешения экрана), то при установке размеров таблицы вместо процентов следует указывать значение в пикселях.

•

Содержимое таблицы всегда будет находиться в рамках ее ячеек. Ячейки таблицы автоматически подстраиваются под элементы, вставленные в них. Например, если вы создадите ячейку шириной 100 пикселей, а затем вставите
в нее изображение шириной 300 пикселей, ячейка автоматически увеличится,
чтобы вместить изображение.
S Bg Color. Указывается цвет фона. Щелкните на цветовой палитре, расположенной напротив этой метки, и в открывшемся окне выберите цвет. После того, как
вы щелкнете на цветовой палитре, курсор изменит свой вид на пипетку. Таким образом, вы сможете подобрать цвет из любой точки страницы, если щелкнете на
нем. Этот параметр применяется как к одной ячейке, так и ко всей таблице.

138

Часть ///. Улучшение узла

Bg Image. Позволяет выбрать фоновое изображение. Укажите имя файла или
щелкните на пиктограмме в виде папки, чтобы найти его. Этот параметр можно
применить как к одной ячейке, так и ко всей таблице. Но также следует учитывать, что многие старые браузеры не поддерживают фоновые изображения
в отдельных ячейках, поэтому не все пользователи смогут их увидеть.
Brdr Color. Указывается цвет границы. Щелкните на цветовой палитре, расположенной напротив этой метки, и в открывшемся окне выберите цвет. После щелчка на цветовой палитре курсор изменит свой вид на пипетку. В результате вы будете иметь возможность подобрать цвет из любой точки страницы, если щелкнете на нем. Этот параметр можно применять как к одной
ячейке, так и ко всей таблице.
Dreamweaver ограничивает реальные цвета только теми, которые наилучшим образом поддерживаются в World Wide Web. Если вы выберете цвет из 16-разрядного (или выше) изображения, то вряд ли получите точно такой же цвет (например,
светло-зеленый заменяется серым). Если это произошло, после использования инструмента-пипетки цвет можно подправить с помощью кнопки System Color
Picker (Выбор системного цвета) в окне Properties (Свойства).
Упорным дизайнерам, которые все же настаивают на 100-процентном соответствии со
своим планом, можно посоветовать создать в графическом редакторе небольшой (10x10 пикселей) одноцветный GIF и использовать его в качестве фонового изображения — тогда его
цвет будет точно такой, как вы планировали. По причине того, что фоновое изображение по
умолчанию размножается, как мозаика, ячейка будет заполнена цветом из GIF-файла, даже
если она больше самого файла.

Управление опциями ячейки
В режиме Standard можно управлять не только опциями таблицы на панели Properties
Inspector, но также и опциями отдельных ее ячеек. Если щелкнуть внутри ячейки, она будет
выбрана, а на панели Properties Inspector появятся отдельные ее свойства (рис. 6.4).
Существует возможность одновременно изменить сразу несколько ячеек. Предположим, что
требуется установить некоторым, но не всем ячейкам один цвет фона и стиль текста. Для этого
вначале нажмите клавишу и, не отпуская ее, щелкните на соседних ячейках, чтобы выбрать
их. Если вы хотите выбрать несколько ячеек, которые не соприкасаются, нажмите клавишу
(клавишу на компьютере Мае) и щелкните на каждой необходимой ячейке. Изменения параметров на панели Properties Inspector будут внесены во все выбранные ячейки.
Если у вас не получается выбрать ячейку, так как в ней находится изображение,
щелкните на нем, а затем воспользуйтесь клавишей на клавиатуре со стрелкой
"влево" или "вправо", чтобы переместить курсЪр и отменить выбор изображения.
После этого на панели Properties Inspector появятся опции данной ячейки.
Если выбрана одна или несколько ячеек, то верхняя часть панели Properties Inspector
отвечает за форматирование текста и адресов URL внутри них. В нижней ее части располагаются следующие опции (рис. 6.4).
Merge Cell (Слияние двух и более ячеек). Чтобы соединить ячейки, вначале
следует выбрать две из них или больше (для этого щелкните на них при нажатой клавише или ).

Глава 6. Знакомство с HTML-таблицей

139

Рис. 6.4. На панели Properties Inspector также можно изменять атрибуты индивидуальн
ных ячеек таблицы
S Split Cell (Разделение ячейки на две). При выборе этой опции открывается диалоговое окно, в котором можно указать, как разделить ячейку: как Row (Строка)
(т.е. разделить ячейку горизонтально) или как Column (Столбец) (т.е. разделить
ячейку вертикально). Можно указать число строк или столбцов и тем самым оп' ределить, на сколько частей будет разделена ячейка. Обратите внимание, что
опция Split Cell может быть применена только при одной выбранной ячейке.
S
S
V
S
S

Horz. Указывается горизонтальное выравнивание содержимого ячейки.
Vert. Указывается вертикальное выравнивание содержимого ячейки.
W. Указывается ширина ячейки. <
Н. Указывается высота ячейки.
No Wrap. При выборе этой опции предотвращается переход текста на следующую строку. Таким образом, ячейка будет расширяться, чтобы вместить
весь текст при его вводе или вставке. (Обычно текст переходит на следующую
строку вниз и увеличивает высоту ячейки.)

S Header. Используется для форматирования текста в ячейке с помощью
стиля заголовка. Таким образом, текст становится полужирным и выровненным по центру.
S Bg (Image). Позволяет определить фоновое изображение для ячейки.
•S Bg (Color). Позволяет определить цвет фона для ячейки.
S Brdr (Color). Позволяет изменить цвет границы ячейки.
140

Часть III. Улучшение

использование свойапва фо[гмагпи[говакил
б
Одним из главных преимуществ в использовании таблиц является возможность представления большого количества информации в понятном и структурированном виде. В таблицах
используются строки и столбцы, которые позволяют читателю следить за большим количеством представленных данных. Также можно сделать информацию еще более презентабельной
и привлекательной, закрасив строки и столбцы таблицы в разные цвета. В предыдущем разделе вы узнали, как изменить атрибуты отдельных ячеек. В этом разделе мы рассмотрим действительно замечательное свойство программы Dreamweaver— Format Table (Форматировать
таблицу), которое позволяет выбрать предопределенные форматы таблиц с отличными цветовыми схемами и улучшить внешний вид страницы.
Данные цветовые схемы были созданы профессиональными дизайнерами, поэтому можно
быть уверенным, что они будут хорошо смотреться на вашей Web-странице.
Чтобы воспользоваться свойством Format Table, создайте новую HTML-страницу,
вставьте простую таблицу любого размера и выполните следующие действия.
1. Выберите в документе существующую таблицу.
2. Убедитесь, что вы находитесь в режиме Standard (выберите View^Table
Mode-=>Standard Mode).
3. Выполните команду Commands«=>Format Table (Команды>=>Форматировать
таблицу).
Откроется диалоговое окно Format Table (рис. 6.5).

R
tA
o
lw
G
s
re
n
&Y
e
o
g
R
A
tie
lo
w
s
B
:H
a
c
sw
iG
e
ry

Щ AltRows:Orange
& AltRows:Red
'I AltRows:5unset
| DblRows:Cyan
I DblRows:Grey
I DbiRows:Light Green

Рис. 6.5. Свойство Dreamweaver Format Table предоставляет большое
количество готовых цветовых схем для улучшения внешнего вида таблиц
4. Выберите одну из схем, прокручивая список, или измените любой из параметров
для создания собственной схемы.
5. Щелкните на кнопке ОК.
Цветовая схема будет применена к таблице.

ГлаваftЗнакомство с HTML-таблицей

141

Вы также можете изменить любой атрибут диалогового окна Format Table и создать
свою собственную цветовую схему.
Использование низкоконтрастных цветовых схем в таблицах считается наиболее
эффективным способом представления информации. (Наглядным примером могут
служить такие узлы, как Intuit's Quicken software, E-Trade, Amazon и др.) Высокий
контраст в таблицах обычно используется для наборов меню узла, а также для
других элементов, к которым необходимо привлечь внимание.

[

нескольких

При работе с таблицей, в которой находится большое количество ячеек, иногда требуется
одинаково отформатировать сразу несколько из них. С помощью программы Dreamweaver
довольно просто выровнять числа, сделать заголовок полужирным или изменить цветовую
схему. Но перед тем, как выбрать способ выравнивания всех чисел, учтите, что в HTML отсутствует такое же четкое управление элементами, как, например, в программе Excel, где
можно выравнивать числа по десятичным запятым. Однако не все потеряно— вы имеете
возможность выровнять содержимое столбцов по левому, правому краю или по центру. Таким образом, если использовать одно и то же количество цифр после десятичной запятой во
всех числах, все они будут выстроены по одной линии. Например, если в таблице одна цена
указывается как $12,99, а другая как $14, перепишите последнюю в виде $14,00, и тогда при
выравнивании по правому краю числа будут выстроены ровно. (Если ваши столбцы и после
этого не будут выровнены, воспользуйтесь моноширинным шрифтом, это должно помочь.)
В следующей инструкции описывается, как создать таблицу с финансовой информацией
в режиме Standard и выровнять все данные в ячейках по правому краю. Эти же действия
можно использовать для выравнивания содержимого ячеек таблицы по левому краю, по центру или по верхнему краю, а также для применения других опций форматирования
(полужирный шрифт или курсив). В приведенной ниже инструкции будет рассказано, как
вставить данные в таблицу, созданную в программе Dreamweaver.
Если вы хотите вставить данные из таблицы, которую создали в такой программе, как
Word или Excel, обратитесь к разделу "Вставка данных таблицы из других программ"
далее в этой главе. Если же вы работаете с таблицей, в которой уже есть данные, и решили просто отформатировать или выровнять ячейки, перейдите прямо к п. 7.
Чтобы создать таблицу с финансовой информацией и выровнять ее, создайте новую, чистую HTML-страницу и выполните следующие действия.
1. Убедитесь, что вы находитесь в режиме Standard (выберите View^Table
Mode«=>Standard Mode).
2. Щелкните в той области, в которой планируете создать таблицу.
3. Щелкните на пиктограмме Insert Table (Вставить таблицу) на панели Insert.
Также можно выбрать команду Insert1^Table (Вставка1^Таблица). Откроется диалоговое окно Insert Table.
4. В соответствующих полях укажите число столбцов и строк, которые будут содержаться в таблице.

142

Часть ///. Улучшение уз

5. Выберите ширину, границу, а также такие параметры, как Cell Padding (Отступ
ячеек) и Cell Spacing (Расстояние между ячейками). Щелкните на кнопке ОК.
Таблица автоматически появится на странице.
6. Щелкните в ячейке, чтобы поместить в нее курсор, и введите какие-либо данные. Повторите это действие для каждой ячейки.
7. Выберите столбец или строку, в которой следует изменить выравнивание.
Поместите курсор на первой ячейке того столбца или строки, которые требуют выравнивания. Затем щелкните на нем и перетащите мышь, чтобы выделить другие
столбцы или строки.
8. Щелкните правой кнопкой мыши (Windows) или удерживайте нажатой клавишу
(Mac) на любой ячейке выделенного столбца или строки.
Откроется раскрывающееся меню (как показано на рис. 6.6). Также можно воспользоваться панелью Properties Inspector, чтобы изменить выбранные элементы.

Рис. 6.6. Ко многим опциям форматирования можно получить доступ, если в
элемент (например, таблицу) и щелкнуть на нем правой кнопкой (Windows) или
клавишу (Mac)
9. В раскрывающемся меню выберите Alignment Left, Center или Right
(Выровнять по левому краю, по центру или по правому краю).
Эта опция позволяет изменить выравнивание сразу всех выделенных столбцов или строк.
Если вы работаете с финансовыми данными, выберите опцию Aligns Right, которая лучше
всего подходит для чисел. Также можно применить другие опции форматирования
к выбранным ячейкам из раскрывающегося меню или из панели Properties Inspector.

Глава & Знакомство с HTML-таблицей

143

Если вы решили отформатировать особым образом одну ячейку в столбце или
строке, щелкните на ней, чтобы поместить туда курсор, а затем выберите одну из
форматирующих опций на панели Properties Inspector. Также можно выровнять
несколько неприлегающих ячеек (т.е. несоприкасающихся): нажмите клавишу
в Windows и, удерживая ее, щелкните на необходимых ячейках. На компьютере Мае при выборе определенных ячеек нажмите и удерживайте клавишу
(). Все изменения, выполненные в раскрывающемся меню или
на панели Properties Inspector, вносятся в выбранные в данный момент ячейки.

использование свойства со/ипи/юв/си
При работе с данными, размещенными в столбцах, зачастую требуется отсортировать их,
как в программе для работы с электронными таблицами (Excel). В последней версии Dreamweaver предоставляется такая возможность даже после того, как данные были отформатированы в HTML (что раньше было довольно проблематично).
Чтобы воспользоваться свойством Sort Table Data (Отсортировать данные таблицы),
создайте новую, чистую HTML-страницу, добавьте таблицу с несколькими строками и столбцами и заполните ее (этот процесс описывался в предыдущем разделе). Также можно использовать существующую таблицу с данными, размещенными в колонках, которые можно отсортировать. Выполните следующие действия.
1. Выберите две или больше ячеек.
Разместите курсор в первой ячейке того столбца или строки, который требуется отсортировать, затем щелкните и перетащите мышь, чтобы выделить другие столбцы или
строки, нуждающиеся в изменении.
2. Убедитесь, что вы находитесь в режиме Standard (выберите View»=>Table
ModeoStandard Mode).
3. Выполните команду Commands^Sort Table (Команды«^Сортировать таблицу).
Откроется диалоговое окно Sort Table, как показано на рис. 6.7.

4 *f
РИС.

^0^^

6.7. СВОЙСТВО Dreamweaver Sort Table Data позволяет

сортировать содержимое ячейки даже после того, как оно было
отформатировано в HTML

144

Часть III. Улучшение у

4. Определите, по какому столбцу будет производиться сортировка. После этого выберите порядок Alphabetically (В алфавитном порядке) или Numerically (В числовом
порядке), Ascending (По возрастанию) или Descending (По убыванию).
При этом можно выбрать сразу два порядка сортировки одновременно и установить флажки Sort Includes First Row (Сортировка с первой строки) и Keep the
TR (Table Row) Attributes With Sorted Row (При сортировке строки сохранять
атрибуты TR (Строки таблицы)).
5. Щелкните на кнопке ОК.
Выбранные ячейки будут отсортированы подобно тому, как если бы они находились
в программе Excel. (Здорово, не правда ли?)

Вапавка с/аннмх &а&ищы из qfiifiux
nflOZflOMM
Ручное преобразование финансовых данных или другой информации из электронных таблиц может быть довольно утомительным занятием. К счастью, в программе Dreamweaver есть
специальное свойство, которое позволяет вставлять табличные данные, созданные в приложениях Microsoft Word или Excel. Чтобы им воспользоваться, табличные данные сохраняются
другой программой в текстовом файле с разделителями. Это означает, что столбцы данных
должны быть отделены друг от друга символами табуляции, запятыми, двоеточиями, точками
с запятой или другими разграничителями. Большинство приложений для работы с электронными таблицами и базами данных, в том числе и Microsoft Word, позволяют сохранять
данные в формате файла с разделителями (называющемся CSV из-за расширения, которое
присваивается таким файлам). Обратитесь к документации по приложению, которое вы используете, чтобы узнать, как сохранить данные в файле с разделителями. После этого их
можно вставить в Dreamweaver.
Чтобы вставить табличные данные в Dreamweaver после их сохранения в файле с разделителями их родным приложением, создайте новую, чистую HTML-страницу и выполните следующие действия.
1. Выполните команду File^lmport^Tabular Data (Файл^Импортировать*^
Табличные данные) или команду Inserts Table Objects^lmport Tabular Data
(Вставка«=>Объекты таблиц1^Импорт табличных данных).
Откроется диалоговое окно Import Tabular Data (рис. 6.8).

РИС. 6.8. В Dreamweaver можно вставить табличные данные из друг
грамм (например? Excel)

Глава 6. Знакомство с HTML-таблицей

145

2. В текстовое поле Import Data File (Импортирование файла данных) введите имя
файла, который требуется вставить, или воспользуйтесь кнопкой Browse
(Обзор), чтобы найти его.
3. В раскрывающемся списке Delimiter (Разделитель) выберите формат разделителя, который вы использовали при сохранении файла в другом приложении.
Опции этого списка следующие: Tab (Символ табуляции), Comma (Запятая), Semicolon (Точка с запятой), Colon (Двоеточие) и Other (Другой). Вы должны были сделать этот выбор при экспорте данных из оригинальной программы, в которой они были созданы, — Excel. Если вы забыли, что выбрали, то всегда можете вернуться назад
и выполнить все действия повторно. Необходимо лишь правильно выбрать нужный
разделитель, чтобы данные были вставлены корректно.
4. Установите один из переключателей Table Width (Ширина таблицы).
Если вы выберете Fit to Data (В соответствии с данными), Dreamweaver автоматически создаст таблицу, которая будет соответствовать импортируемым данным. Если вы выберете
Set (Установить), то должны будете указать размер таблицы в процентах или пикселях.
5. Если вы хотите добавить дополнительное пространство вокруг данных в создаваемой таблице, укажите значения параметров Cell Padding и Spacing.
6. Если необходимо отформатировать данные в верхней строке таблицы, выберите одну из опций списка Format Top Row (Форматировать верхнюю строку). Возможные значения: Bold (Полужирный), Italic (Курсив) или 'Bold
Italic (Полужирный курсив).
7. Укажите ширину границы в поле Border (Граница). По умолчанию это значение
равно 1. Если его оставить, вокруг таблицы будет видна небольшая граница.
Введя значение 0, вы сделаете ее невидимой. Для того чтобы граница стала толще, введите большее значение.
8. Щелкните на кнопке ОК. Таблица будет автоматически создана уже с импортированными данными.
Dreamweaver также позволяет экспортировать данные из таблицы в файл с разделителями.
Это может пригодиться при извлечении данных из Web-страницы и при вставке их в другую
программу (Word, Excel) или в базу данных (FileMaker или Access). Чтобы экспортировать
данные из программы Dreamweaver, поместите курсор в любой части таблицы и выполните
команду File1^ Exports Table (Файл^Экспортировать1^ Таблица). В диалоговом окне Export
Table выберите из раскрывающегося списка Delimiter одну из вышеописанных опций (Tab,
Space, Comma, Semicolon или Colon), а из раскрывающегося меню Line Breaks (Разрыв
строки) — операционную систему (Windows, Mac или UNIX).

использование tnaJuuu, qua установки
ишпе/ивалов и вы{га£ни£анил
HTML-таблицы являются важным элементом создания любого дизайна, в котором требуется относительно сложное размещение элементов на странице. Кроме того, с помощью таблиц можно обойти многие ограничения базового HTML и выполнить некоторые из следующих дизайнерских трюков.
| S Равномерно разместить графические маркеры абзаца (небольшие GIF|
изображения) напротив текста.

146

Часть III. Улучшение узл

Правильно расставить в форме текстовые окна и поля.
Разместить изображения в любой части страницы.
Создать колонки текста, которые не перекрывают всю страницу.
Построить большое количество сложных макетов, которые невозможно создать,
не используя таблицы или слои (более подробно о слоях рассказывается в главе 9).
Далее вы узнаете о том, как использовать таблицы для создания различных типов дизайна,
включая и некоторые из тех, которые были перечислены выше.
При использовании таблицы для управления дизайном необходимо выключить
отображение границы. Чтобы сделать это, при выбранной таблице введите значение 0 в текстовое поле Border панели Properties Inspector.

Использование таблиц при проектировании форм
В программе Dreamweaver довольно просто создавать текстовые поля и раскрывающиеся
меню для HTML-форм! Чтобы они выглядели достойно, рекомендуется использовать таблицы.
В главе 12 изложена полная информация о создании форм. В настоящий момент предположим,
что вы обладаете готовой формой, вам просто требуется подровнять ее текстовые поля. В качестве примера воспользуемся гостевой книгой, которая применяется повсеместно. Ее несложно
создать. Вы же вправе обратиться к этим приемам для выравнивания других элементов формы.
Чтобы выровнять текстовые поля формы с помощью таблицы, создайте новую, чистую
HTML-страницу и выполните следующие действия.
1. Откройте страницу с HTML-формой (или создайте ее).
(Воспользуйтесь инструкциями из главы 12.)
2. Щелкните в области, в которой планируется начать форматирование вашей
формы.
3. Выполните команду Insert^Table (Вставка'ФТаблица).
Откроется диалоговое окно Insert Table.
4. Введите количество столбцов и строк для создаваемой таблицы.
Я создала таблицу из двух столбцов и трех строк.
5. Установите ширину таблицы, которая
и щелкните на кнопке ОК.

соответствует вашему

дизайну,

Я установила ширину в 763 пикселя, отвечающую требованиям разработки страницы
для разрешения экрана 800x600, которое чаще всего используется.
6. Введите 0 в поле Border (Граница).
При установке ширины границы в значение 0 края таблицы станут не сплошными, а
пунктирными (таким образом, во время работы в программе вы будете видеть, где
1
они проходят). При просмотре страницы в браузере, как показано на рис. 6.9, граница таблицы не видна.
7. Щелкните на кнопке ОК.
8. Теперь скопируйте данные из формы в таблицу. С помощью команд Сору
(Копировать) и Paste (Вставить) из меню Edit (Правка) скопируйте текст перед
первым текстовым полем формы и вставьте его в верхнюю левую ячейку таблицы.

Глава 6. Знакомства с HTML-таблицей

147

Form without table
FullName:!
Phone Number: [
Address:[
Form with table

FullName:

f

Phone Number: j
Address:

Г

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

В моем примере на рис. 6.10 последнее действие означает, что следует скопировать
слова Full Name и вставить их в первую ячейку таблицы.
9. Выберите первое текстовое поле (пустое окно, в котором пользователи должны
будут вписать свое имя) и скопируйте его (или перетащите) в правую верхнюю
ячейку таблицы.
10. Повторите пп. 6-7 для остальной формы, пока вы не переместите все ее элементы в ячейки таблицы.
11. Перетащите разделительную линию между первым и вторым столбцами влево
или вправо, чтобы выровнять элементы формы.

Выравнивание строки перемещения
Часто использующимся элементом Web-страниц является строка перемещения, которая
представляет собой ряд из изображений или текста со ссылками на главные разделы Webузла. Строки перемещения обычно располагают вверху, внизу или по бокам страницы, где
пользователи могут легко их найти. Такие строки, как правило, выходят за рамки основной
части дизайна страницы. Дизайнеры зачастую используют HTML-фреймы (см. главу 7) для
вставки строки перемещения, но и с помощью таблиц ее можно эффективно разместить.

148

Часть III. Улучшение узл

Form without table

PuHName:L

„.

j

Phone Number L
Address: 1
Form *ifh table
|ЛТАТЛТЛТА1ГАТЛТАТАТ

jiFidlName:

i

Рис. б. /0. Используйте таблицу для более точного выравнивания данных и эле
В последнем примере предыдущего раздела рассматривался процесс создания таблицы
в режиме Standard с помощью обычных средств. Далее вы узнаете, как использовать средства режима Layout для построения таблицы. С этой целью можно обратиться и к обычному
режиму, но вы увидите, что в Layout достичь намеченного результата намного проще, так как
таблицу можно создать, перетащив ячейки в необходимую область, а не определять, где требуется разделить или объединить ячейки при создании сложного дизайна. Чтобы создать таблицу для размещения в ней строки перемещения с левой стороны Web-страницы, используя
режим Layout, создайте новую, чистую HTML-страницу и выполните следующие действия.
1. Переключитесь в режим Layout. Для этого либо выберите пункт Layout из
раскрывающегося списка панели Insert и щелкните на пиктограмме Layout,
либо выполните ViewTable Mode ^Layout Mode.
2. Щелкните на кнопке Draw Layout Table (Нарисовать макет таблицы) и создайте таблицу, перетащив курсор из левого верхнего угла видимой области
вниз по диагонали через всю страницу.
3. Щелкните на кнопке Draw Layout Cell (Нарисовать макет ячейки), чтобы
выбрать средство рисования ячеек таблицы.
При выполнении следующего действия представьте себе, какой бы вы хотели сделать структуру таблицы. Структура зависит от формы и размера строки перемещения, а также от других элементов, которые должны находиться на странице. (На
рис. 6.11 показано, что мы будем создавать в этом примере.)
4. Щелкните и перетащите курсор мыши, чтобы нарисовать ячейку необходимого размера и формы для строки перемещения и других элементов страницы.

ГлаваftЗнакомство с HTML-таблицей

149

Рис. 6.11. Использование режима Layout для создания дизайна таблицы с местом для стр
перемещения, расположенной слева на странице
На рис. 6.11 показана созданная таблица с двумя большими ячейками. Одна находится с левой стороны страницы для элементов перемещения, а вторая заполняет
все остальное пространство для содержимого страницы.
Даже при рисовании ячеек Dreamweaver автоматически создает таблицу, в которую их
включает. Чтобы продолжить рисовать ячейки, не возвращаясь каждый раз и не щелкая
на кнопке Draw Layout Cell, удерживайте клавишу ( на компьютерах Mac).
5. После того, как вы закончили регулировать ячейки таблицы, щелкните на
пиктограмме Standard, чтобы вернуться в этот режим.
6. Поместите курсор в ячейку таблицы, в которую предполагается вставить
1
строку перемещения, затем выполните Insert^lmage (Вставка ^Изображение).
Воспользуйтесь кнопкой Browse, чтобы найти изображение, которое будет
вставлено в ячейку таблицы.
7. Дважды щелкните на файле с изображением.
Изображение автоматически появится в ячейке таблицы. Повторите это действие
для того, чтобы вставить несколько изображений.
Как видно из рис. 6.11, я использовала несколько изображений, которые расположены одно под другим и отделены пробелами. Таким образом будет проще создать
ряд из кнопок, идущих вниз с левой стороны страницы. Также можно использовать
обычный текст для названия каждого элемента строки перемещения.
150

Часть III. Улучшение узл

Убедитесь, что между всеми изображениями вставлен символ перехода на следующую строку или разрыв, иначе они могут выстроиться в ряд, если ячейка вдруг окажется больше самих изображений. Но чтобы полностью контролировать дизайн, придется еще немного поработать и поместить каждое изображение в отдельную ячейку— тогда появится возможность более точно устанавливать расстояние между ними.
8. Выберите таблицу и убедитесь, что параметр Border на панели Properties
Inspector имеет нулевое значение.
Таким образом, таблица станет невидима, так как в браузере не будут отображаться
ее границы.

Слияние ячеек таблицы
Иногда проще всего изменить число ячеек в таблице, соединив (объединив две и более ячеек
в одну) или разделив ячейки (разделив одну ячейку на две и более строк или столбцов). Такой метод
позволяет изменять расстояние в разделах таблицы и модифицировать их структуру— например,
когда требуется создать длинную ячейку вверху таблицы для баннера и разделить нижние ячейки,
чтобы появилась возможность управлять расстоянием между колонками текста или изображениями. В следующих двух инструкциях показано, как соединить и разделить ячейки таблицы.
Слияние и разделение ячеек производится только в режиме Standard.

Чтобы соединить ячейки, создайте новую HTML-страницу и выполните следующие действия.
1. Выберите команду Insert^Table и создайте таблицу с четырьмя строками и четырьмя столбцами, шириной— 75% и границей— 1. Щелкните на кнопке ОК,«
после чего таблица появится на странице.
2. Выделите две и более соседние ячейки, щелкнув и перетащив курсор мыши от
первой ячейки к последней.
Соединять можно только соседние ячейки.
3. Щелкните на пиктограмме Merge Selected Cells (Слияние выбранных ячеек)
в нижнем левом углу панели Properties Inspector, чтобы объединить выбранные ячейки в одну.
Ячейки будут объединены в одну с помощью атрибута Col span или Rowspan.
Этот HTML-атрибут объединяет ячейку с соседними ячейками, увеличивая строки
или столбцы в таблице.
Чтобы разделить ячейку, выполните следующие действия.
1. Щелкните на ячейке, которую требуется разделить.
2. Щелкните на пиктограмме Split Selected Cell (Разделение выбранной ячейки)
в нижнем левом углу панели Properties Inspector.
Откроется диалоговое окно Split Cell (Разделить ячейку).
3. Установите переключатель в положение Rows (Строки) или Columns
(Столбцы), в зависимости от того, как вы хотите разделить ячейку.
Ячейка может быть разделена на несколько строк или столбцов.
4. Введите количество создаваемых строк или столбцов,
Выбранная ячейка будет разделена на число строк или столбцов, введенное вами.

Глава & Знакомство с HTML-таблицей

151

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

Ф

Лучшим типом Web-дизайна является тот, который представляет аудитории информацию наиболее элегантным и понятным способом. Чтобы ваш дизайн не казался слишком загроможденным, запомните следующее.
Таблица внутри таблицы, которая находится еще в одной таблице — это уже три
уровня вглубь. Все, что превышает это число, неприемлемо для Web-дизайна.
Страницы, в которых используются вложенные таблицы, дольше загружаются,
так как браузеру необходимо обработать каждую из них отдельно перед тем, как
нарисовать всю страницу. Для некоторых типов дизайна незначительное увеличение времени загрузки стоит поставленной задачи, однако в большинстве случаев лучше добавить или разделить ячейки одной таблицы (см. раздел "Слияние
и разделение ячеек таблицы" ранее в этой главе). Вложенная таблица полностью
себя оправдывает, особенно когда требуется вставить таблицу с финансовыми
или какими-либо другими данными в середину сложной страницы.

Чтобы поместить таблицу внутрь другой таблицы, выполните следующие действия.
1. Щелкните в той части, в которой решили создать первую таблицу.
2. Выполните команду Insert^Table.
Откроется диалоговое окно Insert Table.
3.

Введите число строк и столбцов, необходимое для вашего дизайна.

4. Установите параметр Width (Ширина) в значение, которое соответствует вашему
дизайну, и щелкните на кнопке ОК.
Размер таблицы будет автоматически установлен в указанное вами значение.
5. Щелкните в той ячейке, в которую планируете вставить вторую таблицу.
6. Повторите пп. 2-4, указав число столбцов и строк, а также ширину таблицы.
Новая таблица появится внутри ячейки первой таблицы.
7. Введите необходимую информацию во вложенную таблицу так же, как это делается для любой другой таблицы.

152

Часть ///. Улучшение уз

Глава 7

Разбиение страниц на фреймы
В э&ой иииве...
>

Знакомство с HTML-фреймами

>

Создание страниц с фреймами

>

Когда не следует использовать фреймы

>

Установка целевых объектов и ссылок

ф Т
икому не хочется попасть в безвыходное положение, как бы оно ни выражалось: будь
т т* то ложное обвинение в преступлении или ловушка в HTML-наборе фреймов Webузла. Именно поэтому вы должны знать не только основные методы создания фреймов, но
и наиболее эффективные способы их использования для улучшения перемещения по узлу,
чтобы посетителям было просто ориентироваться на ваших страницах.
Многие опытные Web-дизайнеры советуют совсем не использовать фреймы. Я же предлагаю более мягкий подход —• я не рекомендую использовать фреймы, однако вы вправе самостоятельно принять решение. Кроме того, я знаю несколько случаев, когда фреймы могут
оказать существенную помощь.
Чтобы помочь разобраться в этом свойстве HTML-дизайна, я не только покажу вам принципы построения HTML-наборов фреймов в программе Dreamweaver, но и расскажу, когда
фреймы наиболее полезны, а когда их лучше избегать. Фреймы, несомненно, расширяют круг
возможностей в дизайне, но, с другой стороны, они также могут создать запутанную систему
перемещения и вызвать недовольство посетителей. Читая эту главу и изучая построение
фреймов, решите для себя, действительно ли они так необходимы для вашего Web-проекта.

Оценка НТМ11-ф[1еймбв
С помощью фреймов достигается рациональное управление перемещением, так как они
позволяют отображать несколько HTML-страниц в одном окне браузера и независимо управлять каждой отдельной областью. Дизайнеры часто используют фреймы для создания страницы из двух или более разделов. В одном из них помещаются ссылки, при выборе которых
информация появляется в другом разделе того же окна браузера.
Web-страницы, на которых используются фреймы (рис. 7.1), разделены на отдельные
разделы, или индивидуальные фреймы. Все фреймы страницы объединяются в наборы
фреймов. Каждый фрейм набора является отдельным HTML-файлом, что немного усложняет процесс создания страницы с фреймами, даже в такой программе, как Dreamweaver.
Если вы решите создать файлы-фреймы в текстовом редакторе, то вам придется разбираться в нескольких страницах, даже если вы работаете только с одним фреймом, и только
в браузере сможете просмотреть результат своей работы. Визуальный редактор в программе Dreamweaver упрощает создание фреймов, так как при этом можно просматривать сразу
все HTML-файлы, которые составляют набор фреймов, и редактировать их в том виде,
в каком они появляются в браузере.

Рис. 7.1. Фотограф Кен Милберн (Ken Milburn) использует фреймы для отображения
ных работ на узле www. KenMi lburn. com
Фреймы позволяют сохранять на странице одну информацию и изменять другую. Например, можно сохранить видимым список ссылок в одном фрейме и отобразить информацию
каждой ссылки — в другом (рис. 7.1).
В одном окне браузера можно создать довольно много фреймов. К сожалению, некоторые
разработчики злоупотребляют ими и создают настолько сложный и разбитый дизайн, что он
не только эстетически не привлекателен, но и не удобен в использовании. Слишком большое
количество фреймов на странице затрудняет ее просмотр, так как при этом каждое окно становится малозаметным. Все это привело к тому, что многие Web-пользователи возненавидели
фреймы. А некоторые разработчики узлов, заинтересовавшиеся реализацией фреймов, либо отбросили эту идею, либо довольно редко теперь к ней обращаются.
Еще одной сложностью в работе с фреймами является отсутствие их обратной совместимости для очень старых или чисто текстовых браузеров. Это означает, что
посетители, которые используют старые браузеры (старше, чем Netscape 2.0 или
Internet Explorer 3.0), не поддерживающие фреймы, ничего не увидят, кроме пустой
страницы, если конечно, не применить специальный дескриптор для
создания альтернативной страницы, заменяющей страницу с фреймами. К счастью,
Dreamweaver автоматически вставляет дескриптор во все страницы
с фреймами, после чего несложно добавить альтернативную информацию для посетителей тех браузеров, которые не поддерживают фреймы (см. раздел "Создание альтернативного дизайна для старых браузеров" в конце этой главы). Если не использовать дескриптор , то около 2-3% всех потенциальных посетителей будут
исключены. Помните, что эти люди ничего на ваших Web-страницах не увидят.

154

Часть III. Улучшение уз

Если вы хотите просмотреть удачные примеры использования фреймов, посетите
узел www.Lynda.com. В разделе Inspiration вы увидите узлы с фреймами, содержащимися на этом узле.
Приведем список рекомендаций, которым необходимо следовать при использовании
фреймов.
Не используйте фреймы ради фреймов. Только если у вас есть серьезные
причины для применения фреймов, создайте элегантный и простой их набор.
Но не выполняйте этого только потому, что в программе Dreamweaver данную
операцию выполнить довольно просто.
Ограничьте использование фреймов и уменьшите размер файлов. Помните,
что каждый созданный вами фрейм представляет собой отдельный HTML-файл.
Чтобы браузер мог отобразить набор из трех фреймов, потребуется обработать четыре Web-страницы, а это значительно увеличивает время загрузки.
Отключите границы фреймов. В новых браузерах появилась возможность отключать границы, которые делят фреймы в наборе. Правда, если какой-то раздел должен быть прокручиваемым, граница все равно остается видна. Если вы
отключите границы, страницы будут выглядеть значительно чище. Границы
фреймов (рис. 7.1) имеют непривлекательный вид: они толстые, к тому же, закрашены серым цветом, что может испортить даже самый впечатляющий дизайн.
Цвет границы можно изменить на панели Properties Inspector, но все равно
фреймы лучше использовать лишь в случае острой необходимости. В разделе
"Изменение свойств фреймов" вы узнаете, как выключить границы фреймов.
Не используйте фреймы, когда целесообразнее обратиться к таблицам
или CSS. Создавать таблицы проще, чем фреймы, кроме того, они обеспечивают более элегантный, так как менее навязчивы. В главе 6 рассказывается о создании таблиц, а в главе 8 описываются таблицы CSS, которые довольно часто используются.
Не вставляйте одни фреймы в другие. В результате окна станут довольно
мелкими, чтобы вместить полезную информацию, а на экране появится беспорядок. Проблемы также могут возникнуть, когда узел с фреймами ссылается на другой, появляющийся в наборе фреймов первого узла. В примечании
"Воздерживайтесь от использования фреймов при ссылке на Web-узлы других
разработчиков" приведены другие причины, по которым следует ограничить
использование фреймов внутри других фреймов.
'

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

Л^инцип
Фреймы достаточно сложны для понимания, но Dreamweaver упрощает этот процесс.
Создавая Web-страницу с фреймами в программе Dreamweaver, следует помнить, что область
каждого фрейма является отдельным HTML-файлом, поэтому ее нужно сохранять как от-

Глава 7. Разбиение страниц на фреймы

155

дельную страницу. Также необходимо следить, в какой части набора фреймов отображается
определенный файл, чтобы можно было установить ссылки.
На рис. 7.2 представлен простой пример набора фреймов с тремя фреймами, каждый из
которых содержится в отдельной HTML-странице со своим текстом {Page i, Page 2 и Page 3).
Мы будем ссылаться на них в последующих инструкциях.
О Macromedia Dreamweaver MX 2004

[Untitled Document (UntHledFrame 3*)]

, к i ^1$, {^т^АШш^.

Рис. 7.2. Этот набор фреймов из трех частей состоит из нескольких разл
frameset .html, pagel .html, page2.html ИрадеЗ .html
• Помимо файлов, которые отображаются в каждом фрейме, необходим отдельный HTMLфайл для создания набора фреймов. Эта страница не видна в браузере, но в ней описываются
все остальные фреймы. В ней находятся также инструкции к браузеру— как и где их отображать. Не все сразу может показаться понятным, но не следует волноваться. Dreamweaver создает эти страницы за вас. Я же предоставлю вам общее описание всех необходимых в процессе файлов, чтобы последующие инструкции были более понятными.
Итак, рассмотрим пример, изображенный на рис. 7.2. В этом документе вы видите три
фрейма, в каждом из которых отображается отдельная HTML-страница. Четвертый HTMLфайл, который собирает страницу, содержит другие фреймы, но сам не отображается в браузере. Данный файл является файлом набора фреймов, в нем описывается, как должны отображаться фреймы, с какой стороны страницы они будут располагаться (слева, справа, сверху
или снизу) и какого они могут быть размера. В файле набора фреймов также содержится
и другая информация: дескриптор , о котором упоминалось ранее, и имена,
присвоенные каждому из разделов. Имена фреймов используются для установки ссылок, чтобы можно было указать, в каком фрейме должен появиться новый HTML-файл. Более подробно о ссылках во фреймах рассказывается в разделе "Установка целевых объектов и ссылок
во фреймах" далее в этой главе.

156

Часть III. Улучшение узл

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

Создание фрейма с помощью команды Split Frame
В программе Dreamweaver можно создать фреймы двумя методами. Первый из них заключается в разделении HTML-файла на две части, которые затем станут отдельными фреймами. После этого Dreamweaver автоматически создаст безымянную страницу с дескриптором и дополнительные страницы, также без названий, которые будут отображаться в каждом из фреймов. Вместо одной страницы вы будете управлять уже сразу тремя.
Это важно запомнить, так как вам придется назвать и сохранить каждую из этих страниц
в отдельном файле, хотя в программе Dreamweaver вам будет казаться, что вы работаете
только с одной страницей, разделенной на несколько частей.
Всегда сохраняйте свои HTML-файлы перед тем, как что-либо в них вставлять. Однако в случае с фреймами нужно делать все наоборот. Сначала создайте все фреймы
в наборе и только после этого сохраните их, иначе будет сложно следить за файлами
(более подробное объяснение находится в разделе "Сохранение файлов в наборе
фреймов"). Вначале будет рассказано о том, как создать простую страницу с фреймами.
Для создания в программе Dreamweaver простого набора фреймов (рис. 7.2) выполните
следующие действия.
1. Выберите команду File^New (Файл^Создать).
Откроется новая страница, как показано на рис. 7.3.
2. Выберите из списка General (Общие) пункт Framesets, а затем из списка
Framesets справа— пункт Fixed Top, Nested Left (Фиксированный верх,
Вложенная левая часть).
3. Щелкните на кнопке Create (Создать).
Набор фреймов появится на экране.
4. Щелкните на полосе, разделяющей фреймы, и перетащите ее так, чтобы страница была поделена в соответствии с вашими требованиями.
5. Чтобы отредактировать часть набора фреймов, щелкните внутри отдельного
фрейма, после чего можно работать с ним, как с обычной HTML-страницей.
Помните, что всегда следует сохранять файлы перед установкой ссылок или вставкой изображений и других файлов.
Теперь можно вводить текст, вставлять изображения, создавать таблицы и добавлять другие элементы так же, как в любую другую страницу.
Чтобы сохранить файлы, выполните инструкции из раздела "Сохранение файлов
в наборе фреймов".

Глава 7. Разбиение страниц на фреймы

15

Basc
i page
Dynamc
i page
Tempa
lte page

D
Q
Q
Q

Other

CSS Style Sheets

Page Desg
ins (CSS)
Page Desg
ins
Page Desg
ins (Accesabe
l) 8

H<

Q
•
D

Fixed Bottom, Nested Left ^
Fixed Bottom, Nested Righ *
Fixed Left
>
Fixed Left, Nested Bottom
Fixed Left, Nested Top
Fixed Right
"
Fixed Right, Nested Bottor
Fixed Right, Nested Top
Fixed Top
Fixed Top, Fixed Bottom
ЭЯ8ЯИЯ8ИИЯ8ИПЙЯИМ
Fixed Top, Nested Right
Split Horizontal
Split Vertical

Рис. 7.З. В программе содержатся предопределенные наборы фреймов,
упрощающие создание новых фреймов

Создание фреймов с помощью пиктограммы Frames панели L
Другим способом создания фреймов является использование пиктограммы Frames (с раскрывающимся меню), изображенной на рис. 7.4. На панели Layout (которую можно открыть,
выбрав панель Layout (Макет) из раскрывающегося списка в верхней части рабочей области)
находится пиктограмма Frames с несколькими заранее определенными наборами фреймов.
В программе Dreamweaver можно создать набор фреймов, просто выбрав один из пунктов
раскрывающегося меню Frames. На рис. 7.4 представлена панель Layout с выбранной пиктограммой Frames и примененной к новому документу опцией раскрывающегося списка.
Чтобы создать страницу с фреймами, используя пиктограмму Frames панели Layout, выполните следующие действия.
1. Выберите команду File^New^Basic Page, чтобы создать новую страницу.
2. На панели Layout щелкните на пиктограмме Frames и выберите из раскрывающегося списка наиболее подходящий набор фреймов, который вы планируете построить (рис. 7.4).
Не беспокойтесь о том, что она не точно совпадает с требуемым дизайном, позднее его
можно будет изменить.
3. Если необходимо, модифицируйте набор фреймов.
В дальнейшем можно модифицировать набор фреймов, перемещая границы фреймов
для изменения их размера.
Фреймы можно также разделить, выполнив команду Modify=> Frameset (Изменить1^
Набор фреймов) и выбрав фрейм для разделения: левый, правый, верхний или нижний.
Чтобы сохранить файлы, перейдите к инструкции из следующего раздела "Сохранение
файлов в наборе фреймов".

158

Часть III. Улучшение у

Рис. 7.4. На панели Layout содержатся предопределенные наборы фреймов,
выбрать из раскрывающегося списка, доступного из пиктограммы Frames

Сохранение файлов в наборе фреймов
Как уже ранее отмечалось, файл с набором фреймов следует сохранять только после добавления всех фреймов. Иначе будет очень сложно следить за файлами. Запомните, что
фреймы в HTML состоят как минимум из двух HTML-файлов, даже если существует видимость того, что вы работаете только с одним.
i
Сохранить работу можно будет несколькими способами: либо сохранить все сразу, либо
каждый фрейм и набор фреймов отдельно. В примере предыдущего раздела "Создание фрейма
в программе Dreamweaver" страница состояла из четырех отдельных HTML-файлов, каждый из
которых требовалось назвать и сохранить на жестком диске. Чтобы сохранить все файлы
только что созданного вами набора фреймов, выполните следующие действия.
1. Выберите команду File^Save All (Файл^Сохранить все).
Откроется диалоговое окно Save As (Сохранить как), в котором можно будет присвоить файлу имя и назначить папку для его сохранения. Это первое из нескольких
диалоговых окон Save As, которые в дальнейшем откроются. Их количество зависит от количества фреймов в документе.
2. Введите имя файла.
Dreamweaver предложит имя, но вы можете выбрать иное. Первый сохраняемый
файл представляет собой файл набора фреймов (в котором содержится информация
обо всех остальных фреймах). В окне документа за диалоговым окном Save As
можно заметить, что вокруг всего документа появилась толстая пунктирная линия,
показывающая, что это набор фреймов.

Глава 7. Разбиение страниц на фреймы

159

3. Перейдите к той папке, в которой будут храниться HTML-файлы, и щелкните
на кнопке Save.
Файл набора фреймов сохранится, после чего откроется новое диалоговое окно
Save As для следующего фрейма. Каждый файл с фреймом должен иметь отдельное имя. Я предпочитаю называть их следующим образом: f r a m e l . h t m l ,
f rame2 . h t m l или l e f t frame .html, r i g h t f rame .html. Это не имеет особого
значения, но может помочь различать файлы в будущем. После того, как вы сохраните все фреймы, диалоговое окно Save As закроется.
Тщательно подбирайте имена для сохраняемых файлов, чтобы обеспечить определенный порядок. Обратите внимание: когда вам предлагается сохранить следующий
файл, Dreamweaver отмечает подсветкой и темной границей текущий фрейм. Имена
для файлов лучше выбирать так, чтобы они указывали, какую область они представляют, а также помогли устанавливать в них ссылки.
Итак, вы назвали и сохранили свои документы. В дальнейшем опция Save All будет сохранять все файлы набора фреймов, не запрашивая информацию о каждом из них. Данная
опция является отличным способом гарантировать сохранение всех страниц набора фреймов
при редактировании такого рода документа.
Иногда не следует сохранять сразу все файлы. Чтобы сохранить отдельный
фрейм, включенный в набор, и при этом не затрагивать все остальные, поместите
в нем курсор и выберите команду File^Save Frame (Файл^Сохранить фрейм) —
подобно тому, как вы сохраняли бы отдельную страницу. Dreamweaver сохранит
только тот файл, во фрейме которого находится курсор.
Чтобы сохранить лишь ту страницу, в которой определяется набор фреймов, выберите
весь набор (это можно сделать, щелкнув в верхнем левом углу рабочей области) и выполните
команду File^Save Frameset (Файл^Сохранить набор фреймов). Если вы не выберете весь
набор фреймов, команда Save Frameset в меню File будет отсутствовать. Помните, что эта
страница не отображается ни в одном фрейме. В ней просто определяется вся видимая область, описываются, какие страницы должны находиться в каждом фрейме, а также указывается их положение и размер.
Когда вы продолжите работу со страницей, не забывайте, что при изменении содержимого
определенного фрейма вы изменяете не тот файл, с которого начинали (файл набора фреймов).
Не совсем ясно, какой файл требуется сохранять при такой работе? При редактировании содержимого фрейма убедитесь, что курсор все еще находится в нем, после этого выберите команду
File^Save Frame. Страница, соответствующая фрейму, над которым вы работаете, будет сохранена. Для большей безопасности выполните команду File^Save All, чтобы сохранить все
изменения во всех файлах набора фреймов, включая сам файл набора. Эта команда особенно
полезна, когда вы внесли изменения в несколько фреймов и решили сохранить сразу все.

Воздерживайтесь от использования фреймов при ссылке на Web-узлы других
- разработчиков
.
лй^^Щ
:

Как известно, большинство дизайнеров не хотят отпускать посетителей' Ш}щ^^у^^№щ^,
устанавливают ссылки, но ведь в этом природа World Wide Web. Если ваш узел хорошо спроектирован, то не следует беспокоиться о потере клиентов. Наоборот, познакомьте их 'с ффррщ.- \
цией своего узла, вежливо помогите найти другие ресурсы, которые будут иЦ йатф&нь!, и 6x4/
пустите. Фреймы держат пользователей в плену и обычно только раз^ажайт'их,Edit NoFrames Content (Изменить^
Набор фреймов «=> Редактировать нефреймовое содержимое).
Откроется новое окно документа с заголовком NoFrames Content (Нефреймовое
содержимое).
2. Отредактируйте эту страницу так же, как и любую другую страницу в программе Dreamweaver: вставьте изображение, добавьте текст, создайте таблицу,
а также используйте другие функции программы (кроме фреймов, конечно).
Ваша задача заключается в создании альтернативной страницы, которую смогут
просмотреть посетители, использующие старые браузеры. На альтернативной странице рекомендуется разместить инструкцию для получения новой копии браузеров
Microsoft Internet Explorer или Netscape Navigator. Можно также сделать и точную
копию страницы, созданной во фреймах, но при этом их не использовать.
Лучше всего сделать страницу NoFrame максимально простой, используя только
текст, тогда ее смогут просматривать многие пользователи.

3. Чтобы закрыть окно и вернуться к набору фреймов, снова выберите команду
Modify^FramesetoEdit NoFrames Content.
Флажок Edit NoFrames Content будет снят и вместо альтернативной страницы
появится страница с фреймами.
Если вы создали альтернативную страницу, не забывайте ее обновлять после внесения изменений в набор фреймов.

Глава 7. Разбиение страниц на фреймы

169

Глава 8

Каскадные таблицы стилей
В э&ой главе...
> Оценка каскадных таблиц стилей
> Использование CSS для форматирования текста
> Создание внутренних и внешних таблиц стилей
> Использование CSS для разметки страницы

7 7
м екст является сердцем практически каждой Web-страницы. Изначально HTML был
т* разработан для обмена текстовыми файлами между учеными и исследователями,
а не для создания красивых страниц. Графические изображения появились гораздо позже.
В те времена, когда программа Dreamweaver еще не существовала, для форматирования текста требовались достаточно глубокие знания HTML-дескрипторов, к тому же, информацию
о них приходилось запоминать.
После знакомства с работой над текстом в программе Dreamweaver вы, возможно, придете
к заключению, что HTML не предоставляет полного типографского контроля над дизайном
страниц. Что ж, добро пожаловать в мир HTML-дизайна! К счастью, этот мир заметно изменился в последнее время. Благодаря новым технологиям Web-дизайнеры получили гораздо
больше возможностей управления текстом, чем у них было несколько лет назад.
Существенным преимуществом стало изобретение каскадных таблиц стилей (Cascading
Style Sheets — CSS), являющихся расширением HTML, которое предоставляет гораздо больший контроль над стилем и позволяет определить свойства форматирования разных типов
текста (например, заголовков). Если вы хотите, чтобы все основные заголовки имели шрифт
Anal, были полужирными и находились по центру, то можете создать стиль со всеми этими
требованиями и применить их сразу к нескольким страницам или даже ко всему узлу.
Каскадные таблицы стилей также позволяют создавать дизайн страницы, их гораздо
легче использовать для разметки, чем таблицы. CSS и CSS-P (позволяющие размещать
элементы на странице в виде слоев) за короткое время стали самым предпочтительным методом создания страниц. Многие дальновидные дизайнеры назвали CSS и слои окончательной победой над ограничениями в процессе форматирования текста и разметки страницы, существующими в чистом HTML.
Если вы ранее не сталкивались с CSS-стилями, то эта глава поможет вам оценить преимущества таблиц стилей. Вы ознакомитесь с их свойствами, которые заметно сэкономят ваше время, и сможете сразу ими воспользоваться. Компания Macromedia поверила в успех использования CSS и сделала все возможное, чтобы в последней версии программы Dreamweaver с ними можно было работать еще проще.
В настоящей главе мы рассмотрим принцип работы CSS-стилей, а также их реализацию
в Dreamweaver. Вы ознакомитесь с наиболее расширенными возможностями CSS. Эта глава
также прольет свет на будущее Web-дизайна. В главе 9 вы найдете более подробные инструкции
по использованию CSS-P и слоев для управления макетом страницы.

совмеопимоаии Jfiaif3efia
Несмотря на то, что CSS-стили появились довольно давно, многие дизайнеры отказываются
их использовать, так как CSS не поддерживаются ранними версиями браузеров, например,
Netscape 4. Но все меняется, и в настоящее время современные браузеры лучше обрабатывают
CSS-страницы. В последних версиях Netscape, Internet Explorer, Safari и Opera довольно хорошо
(хотя и с некоторыми отличиями) осуществлена поддержка CSS. И чтобы вы сразу заметили эти
несоответствия, в программу Dreamweaver включено несколько функций, специально созданных
для управления различиями в браузерах (эти свойства описываются в конце главы 9).
Если вы не ставите перед собой цель охватить максимально возможную аудиторию
и нормально относитесь к тому, что некоторые посетители используют старые браузеры
(например, Netscape 4 и ниже), вам не стоит особо волноваться по поводу браузеров, которые
не распознают CSS-стили. Но даже если вам необходимо охватить и эту аудиторию, CSS любезно поможет вам в этом: вы можете немного потерять в красоте дизайна, но зато посетители как минимум смогут увидеть содержимое узла. (Исключение составляют слои, рассматриваемые в главе 9, которые не всегда отображаются в старых браузерах.)

Оценка каскадных *па&ищ сйамей
Понятие таблиц стилей использовалось задолго до появления их в Web. В текстовых редакторах, таких как Microsoft Word, для форматирования текста уже давно применяются таблицы стилей. Например, используя их в текстовом редакторе, можно создать определенные стили (Заголовок, Обычный текст и Примечание), а затем применить их к различным областям страницы.
Существенное преимущество такого подхода очевидно: вам потребуется всего один раз определить стили, после чего можно применять их в любом месте документа, один раз щелкнув мышью.
Самым значительным преимуществом CSS-стилей (см. раздел "Использование
внешних таблиц стилей") является возможность вносить глобальные изменения
стиля по всему Web-узлу. Представьте, что в один прекрасный день вы решили
сделать все заголовки фиолетовыми вместо синих. Для этого вам необходимо изменить определение стиля Заголовок, и весь текст на странице или узле, отформатированный данным стилем, автоматически сменит свой цвет. Также можно применять изменения как ко всем заголовкам, использующим данный стиль, так
и только к некоторым из них. А если вам когда-либо придется изменять дизайн узла (и поверьте мне, все хорошие узлы должны периодически меняться), вы сможете сэкономить часы и даже дни, если в основе вашего дизайна лежат CSS-стили.

Код CSS-стилей
Каскадные таблицы стилей являются по своей сути списком правил, определенных
в HTML. В языке HTML уже содержится набор правил поведений для различных дескрипторов, но вы не сможете их изменить — они подобны грамматическим правилам в языке.
В отличие от этого, CSS позволяет устанавливать собственные правила, доминирующие
над правилами HTML, довольно ограниченными в области дизайна страницы. В новых правилах определяется, как браузер должен отображать определенные элементы страницы.
Представляете, если бы вы могди придумать новые слова и грамматические правила вашего
языка?! А теперь представьте, что каждый человек также может это сделать. Общение довольно быстро станет затруднительным, не правда ли?
Чтобы общение было возможным, каждый раз придумывая новые правила, подключайте
к документу словарь и учебник по грамматике. Именно так работает CSS.

Глава 8. Каскадные таблицы стилей

171

Если CSS-стили применяются только к данной странице, то они должны находиться в области HTML-страницы, если же вы создаете внешние CSS-стили, применяющиеся
сразу к нескольким страницам, то они должны находиться в отдельном файле. CSS состоит из
кода, в котором описываются атрибуты стиля, например, цвет, шрифт и выравнивание. Стиль
может содержать любое количество правил, а в каждом правиле представлено описание, состоящее из одного и более свойств и соответствующих значений. Если все это звучит немного не понятно, не волнуйтесь. Во второй части этой главы вы найдете пошаговые инструкции
по использованию CSS, a Dreamweaver "спрячет" технические подробности за пределами видимости (если, конечно вы не любите сами просматривать код).
На рис. 8.1 изображены некоторые компоненты таблицы стилей.
Селектор

Правило

Свойство

Значение

nt-Cabily: Ariel, Helvetica, sans-seiriC
font-size: i2px;
colot: WITT?;

Описание
Таблица стилей

Рис. 8.1. Таблица стилей, вставленная в HTML-документ
Глядя на рис. 8.1, может показаться, что CSS-стили — это довольно сложная вещь. Что ж,
честно говоря, так оно и есть. Но прелесть программы Dreamweaver как раз и состоит в том,
что она прячет сложный код, необходимый для создания CSS-стилей, за простым в использовании интерфейсом. В Dreamweaver можно сделать практически все, что по силам CSS, даже
не прикасаясь к коду.
В Dreamweaver MX 2004 разработчики пошли еще дальше — теперь есть возможность
просматривать многие CSS-эффекты прямо из редактора. Вам даже не придется открывать
свою работу в браузере, чтобы посмотреть, как работают CSS-стили. Сотрудники компании

172

Часть ///. Улучшение у

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

ь документа;. z-м % "**£• £ ; ~." .''• - и < d i v c l a s s = ^ m y s t y l e f l > ) . В результате содержимое дескриптора принимает свойства стиля. Так в чем же разница между дескрипторами и ? Разница в одном: дескриптор считается
строковым элементом, a —блочным.

Глава 8. Каскадные таблицы стилей

20

Сроковые элементы располагаются в тексте и не содержат начальных и конечных строк.
Например, дескрипторы и являются строковыми элементами. Их можно разместить один за другим, и между ними не будет разрыва строки. Они плывут вместе с текстом.
С другой стороны, дескриптор является блочным элементом, необходимым для
идентификации отдельного блока содержимого. После начального и конечного дескриптора
создается новая строка, точно так же, как создается новая строка перед и после дескриптора , который также является блочным элементом.
Как вы увидите далее в этой главе, дескрипторы используются для создания
слоев. Дескриптор не создает слой и используется только для применения стиля к определенной области текста. Когда бы вы ни использовали слои или любые другие функции CSS-позиционирования, вы будете пользоваться дескриптором . ,

Дескриптор
Из инструкций в этой главе вы узнаете, как создать стиль для боковой панели, а затем
применить его для создания отдельной боковой панели. Вы познакомитесь с дескриптором
, необходимым для создания слоя, и узнаете, как сделать его перетаскиваемым, чтобы
его можно было разместить в любом месте страницы. После того, как вы разберетесь с этим
методом, можно будет создавать макеты страниц с помощью слоев.
Чтобы вставить элемент с информацией стиля, выполните следующие действия.
1. Создайте новый класс стиля, выбрав команду Text^CSS Styles^New (Текста
CSS-стилиФСоздать) и назовите его . sidebar.
2. Сохраните стиль как внутреннюю таблицу стилей для текущего документа (если
хотите, можете сохранить эту таблицу как внешнюю).
*
3. В описании CSS-стиля для боковой панели установите размер текста 12 пикселей, а шрифт — Arial, Helvetica и Sans Serif. Щелкните на кнопке ОК.
Откроется диалоговое окно Insert Div Tag (Вставка дескриптора Div) (рис. 8.25).
4. В раскрывающемся меню Class выберите стиль sidebar, который вы только что
создали, и щелкните на кнопке ОК.
Dreamweaver вставит текст в качестве заполнителя для вашего содержимого. Обратите
внимание, что этот текст-заполнитель соответствует атрибутам стиля s i d e b a r , который вы создали ранее.
5. При необходимости измените заполнитель, введя свой собственный текст.
Для этого примера введите фразу Это текст для моей боковой панели.
На данном этайе вы должны увидеть свой текст (с примененным стилем) расположенным на странице в том месте, где вы вначале вставили дескриптор
(рис. 8.26). Обратите внимание: когда вы наводите курсор мыши на блок текста, вокруг него появляется красная граница. Такие визуальные сигналы помогают работать с дескриптором < D I V > в режиме Design.

Рис. 8.25. Диалоговое окно Insert Div Tag

202

Часть ///. Улучшение у

Рис. 8.26. Вставленный дескриптор с текстом
В следующей инструкции мы представим блок в виде видимого слоя и отформатируем его как элемент боковой панели, который может быть размещен в любом месте страницы путем простого перетаскивания.
Чтобы сделать слой видимым и изменить визуальные свойства контейнера, выполните
следующие действия.
1. Выберите стиль sidebar на панели CSS Styles, щелкните на нем правой кнопкой
мыши и затем выполните команду Edit (На Мае щелкните на кнопке Edit Style.)
Откроется диалоговое окно CSS Style Definition.
2. Выберите категорию Positioning (Позиционирование) и в поле Туре (Тип) перейдите в раскрывающемся меню к пункту Absolute (Абсолютное).
При установке типа Absolute или Relative (Относительное) в режиме Design у слоя
появляются манипуляторы.
3. В разделе Placement (Расположение) в поле Тор введите 100 рх, а в поле
Left — 1 0 0 рх.
После этого 6yaef создан слой, расположенный в 100 пикселях от верхнего и левого
края страницы.
4. Щелкните на кнопке Apply (Применить).
Обратите внимание, что выбранный текст страницы (в режиме Design) теперь имеет
вид слоя с манипуляторами, позволяющими перетаскивать ее в любое место страницы.
После этого можете щелкнуть на кнопке ОК, чтобы закрыть диалоговое окно и попробовать вручную переместить слой. Значения позиционирования, которые вы ввели ра-

Глава 8. Каскадные таблицы стилей

203

нее, будут автоматически обновляться. Гораздо проще перемещать элемент на странице по отношению к другим элементам.
5. При открытом диалоговом окне CSS Style Definition выберите категорию
Background (Фон) и установите светло-серый фон, щелкнув на цветовой палитре и указав в ней необходимый цвет.
6. Щелкните еще раз на кнопке Apply, чтобы увидеть внесенные изменения (рис $27).

Рис. 8.27. Добавление цвета фона в CSS-контейнер
7. Выберите категорию Box, введите ширину 250 пикселей, а высоту — Auto. Снова щелкните на кнопке Apply.
8. В области Padding категории Box, введите 10 пикселей в поле Тор и снова
щелкните на кнопке Apply.
Так как был установлен флажок Same for All (To же для всех), Dreamweaver применит поле в 10 пикселей для верхней, правой, нижней и левой области контейнера (рис. 8.28).
9. Выберите категорию Border (Граница), установите Style to Dashed и укажите
темно-серый цвет. Щелкните на кнопке ОК, чтобы применить внесенные изменения и закрыть диалоговое окно CSS Style Definition.
На рис. 8.29 показан окончательный внешний вид слоя боковой панели. Можете изменить
и другие установки диалогового окна CSS Style Definition, чтобы изменить внешний вид боковой панели. Щелкая на кнопке Apply, вы сможете применять внесенные изменения, не закрывая диалоговое окно.

204

Часть III. Улучшение

Рис. 8.28. Добавление к CSS-контейнеру поля

C:\JC Warner ComiMnications\CSS\CSSbidebaf.htai

Рис. 8.29. Так завершенная боковая панель выглядит в браузере
Глава 8. Каскадные таблицы стилей

205

В этом разделе мы создали такой слой с добавленной информацией стиля, который можно
поместить в любом месте страницы. Теперь слой можно перемещать с помощью мыши или
ввести для этого слоя значения расположения на панели Properties Inspector. Пока в поле
Туре категории Positioning для класса выбрано значение Absolute или Relative, в Dreamweaver CSS-элемент выглядит как слой. Чтобы убрать манипуляторы слоя, выберите в категории Positioning опцию Static (Статичный).
В главе 9 вы более подробно познакомитесь со слоями и узнаете, как их использовать
в качестве устройств для позиционирования. Вы также узнаете, как управлять многими другими свойствами и атрибутами слоя.

206

Часть ///. Улучшение уз

Часть IV

Делаем узел еще круче

МЫ
КРАСИМ-

НАШ

Глава 9

Слои, DHTML и поведения
/3 э&ой

главе...

> Взгляд на DHTML
> Точное позиционирование с использованием слоев
> Применение поведений
> Работа со старыми браузерами
> Знакомство с расширениями и упаковочным менеджером
> Преобразование в XHTML

f
оздавать расширенные HTML- и DHTML-свойства позволяют две мощные функции
V ^ Dreamweaver: слои и поведения. Но перед тем, как начать работу, следует более подробно с ними ознакомиться (так как это одни из самых сложных функций Web-дизайна
в Dreamweaver). В этой главе будут описаны обе функции, вы узнаете, за что отвечает каждая
из них и как их использовать совместно для создания удивительных эффектов. Далее речь
пойдет о том, как использовать слои для точного и более надежного, чем посредством
HTML-таблиц позиционирования элементов на странице. Остальная часть главы посвящена
реализации DHTML в ваших Web-страницах с помощью поведений для добавления в них
мощной интерактивности.

СО CAXfSLMU
Слои позволяют точно позиционировать элементы HTML-страницы. Слои можно считать
емкостями, в которых позволяется хранить изображения, текст и другие элементы. Такие емкости допускается размещать в любом месте HTML-страницы и даже поверх другого слоя.
С помощью слоев можно размещать блоки текста и изображения в заданном месте страницы, указывая расстояние от верхнего и левого края страницы (данная возможность отсутствует в HTML). Одним из самых больших ограничений HTML является невозможность размещать элементы один над другим. Используя слои и опцию позиционирования под названием Z-координата, можно наслаивать текст, изображения и другие элементы.
Так как слои являются емкостями, можно манипулировать сразу всем содержимым, помещать их поверх другого слоя, делать их видимыми и невидимыми.
'
Помните своего учителя математики, который пользовался проектором? Слои работают
так же, так как в них используется свойство прозрачности. Их можно перемещать с целью
разместить элементы в определенном месте, накрыть другие элементы страницы, их можно
включить и выключить, чтобы иметь возможность управления отображением на экране, Если
вы ранее никогда не сталкивались со слоями, воспользуйтесь следующими пошаговыми инструкциями и немного поэкспериментируйте, создавая слои, добавляя изображения и другие
элементы и перемещая их по экрану.

Создание слоев
Чтобы создать слой, выполните следующие действия.
1. Выполните команду Inserts Layout Objects^Layer (Вставка^Объекты макета«=>Слой).
На странице будет4 отображено поле, представляющее пустой слой.
Также можно щелкнуть на кнопке Draw Layer панели Layout Insert, а затем нарисовать новый слой в любой части рабочей области (рис. 9.1).

flashnav.hfirf

Ш. flashyJitm
coacNng.html
fit,' coachngnav.htm

Рис. д. /. Слои можно создать в любой части страницы
2. Щелкните в какой-либо области контура слоя, чтобы выбрать его.
Если навести мышь на контур слоя, внешний вид курсора изменится на четырехстороннюю стрелку (руку на компьютере Macintosh), а если после этого щелкнуть мышью, слой будет выделен. Вокруг выбранного слоя по периметру появится восемь небольших черных квадратов, по которым можно определить, что данный слой выбран.
3. Перетащите любой из этих квадратов, чтобы изменить размер слоя.

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

210

Часть IV. Делаем узел еще круч

1. Щелкните внутри слоя, чтобы поместить в него курсор.
Внутри поля слоя появится мигающий курсор.
2. Выполните команду lnsertlmage (Вставка^ Изображение).
Откроется диалоговое окно Select Image Source (Выберите источник изображения).
3. Найдите на своем диске файл с изображением, которое требуется вставить, после
этого щелкните на нем, чтобы выделить.
4. Щелкните на кнопке ОК.
Изображение появится внутри слоя.
5. Выделите изображение и воспользуйтесь панелью Properties Inspector для внесения в него каких-либо изменений.
Форматирование изображений внутри слоя проводится точно так же, как на обычной
HTML-странице. Например, с помощью пиктограммы Align Center (Выровнять по
центру) можно выровнять изображение по центру слоя. Более подробную информацию о форматировании изображений вы найдете в главе 5.
6. Снова щелкните внутри слоя, чтобы поместить в него курсор, и наберите какойнибудь текст (рис. 9.2).
7. Выделите текст и отформатируйте его, воспользовавшись опцией форматирования, находящейся на панели Property Inspector, или выбрав соответствующие
опции из меню Text (Текст).
Форматирование текста в слое производится так же, как и в обычном документе программы
Dreamweaver. (Более подробно о форматировании текста можно прочитать в главе 2.)
8. Щелкните на вкладке, которая появилась в верхнем левом углу области слоя
или где-нибудь на его границе, чтобы выбрать его.
На то, что слой успешно выбран, указывают манипуляторы — небольшие черные
квадратики, появившиеся по углам и насторонах слоя.
9. Щелкните на манипуляторе и перетащите его, чтобы изменить размер слоя.
Всегда устанавливайте размер слоя таким образом, чтобы его содержимое четко помещалось в границах; это упрощает позиционирование слоя на странице.
Если вы внимательно посмотрите на рис. 9.2, то увидите, что при выбранном слое на
панели Properties Inspector его координаты отображаются в пикселях: W (ширина)
и Н (высота). Таким образом, вместо того, чтобы вручную изменять размеры слоя, можно указать значения ширины и высоты прямо на панели Properties Inspector. Все эти
параметры отображаются на панели Property Inspector только при выбранном слое.
10. Чтобы переместить слой, щелкните на небольшой вкладке, которая появилась
в верхнем левом углу, и воспользуйтесь ею, чтобы перетащить слой в любую
часть страницы.
Поскольку слои используют точное позиционирование, можно переместить их в какую-либо область страницы, и они будут отображаться в браузерах, поддерживающих
DHTML (Navigator 4, Internet Explorer 4 и выше) именно в этих местах.
На панели Properties Inspector также отображаются координаты слоя: L (слева),
Т (сверху). Таким образом, можно не перетаскивать слой, а изменить его положение,
указав значения в окнах позиционирования: L (число пикселей от левого края страницы) и Т (число пикселей от верха страницы).
11. Присвойте слою ими и введите его в текстовое поле Layer ID в верхнем левом углу панели Properties inspector.

Глава ft Слои, DHTML и поведения

211

При создании нового слоя Dreamweaver автоматически присваивает ему имя, начиная
с Layerl, Layer2 и т.д. Рекомендуется изменить это название на более информативное, особенно, если вы работаете с большим количеством слоев на странице, — следить за ними по именам станет гораздо проще. Запомните, что перед тем, как свойства
слоя появятся на панели Properties Inspector, этот слой необходимо будет выделить.
Щелкните на этой вкладке, чтобы выбрать слой
*
*
Ю
* I*xt

fi»M»V№M

Natural

WomaiLoom

Рис. 9.2. Изображения и текст вставляются в слои точно так же, как и в обычный

Наложение слоев и изменение видимости
Преимущество слоев заключается в маневренности—их можно накладывать один на
другой и делать невидимыми. Далее в этой главе, в разделе "Работа с поведениями", вы
узнаете, как комбинировать указанные свойства с поведениями с целью создания анимации
и других эффектов. Чтобы наложить один слой на другой, просто перетащите один из них
поверх другого. В отличие от изображений, слои предоставляют полное управление разметкой
страницы, втом числе способность наложения друг на друга. Чтобы наложить изображения,
расположите каждое в отдельном слое (см. предыдущий пример) и переместите один из них так,
чтобы он закрывал другой. Существует два метода определения порядка наложения слоев:
Z-index, который находится на панели Properties Inspector, и панель Layers (Слои), которую
можно открыть, выполнив команду Window^Layers (Окно^Слои) — рис. 9.3.
Чтобы наложить слои, а также изменить их порядок и видимость, выполните следующие действия.
1. Откройте страницу с двумя и более слоями на ней.
2. Выделите слой, щелкнув на его границе.

212

Часть IV. Делаем узел еще круч

Рис. 9.3. Воспользуйтесь панелью Layers для изменения видимости и порядка н
3. Выполните команду Window^Layers, чтобы открыть панель Layers.
На этой панели находится список всех слоев, находящихся на странице. Если вы работали со слоями в программе Adobe Photoshop или Macromedia Fireworks, то найдете
много общего, например пиктограмму в виде глаза, необходимую для управления видимостью, а также возможность перетаскивать слои по панели и таким образом изменять их расположение. " '
4. Измените расположение слоев, щелкнув на названии слоя в панели Layers и перенеся его вверх или вниз.
Порядок слоев на панели Layers изменится. На панели также указывается значение Z
каждого из слоев. Самое меньшее значение принадлежит самому нижнему слою.
Название слоя можно изменить. Для этого дважды щелкните на имени, чтобы выбрать
его, а затем введите новое имя.
>
5. Щелкните на пиктограмме в виде глаза слева от каждого слоя, чтобы сделать
слой видимым или невидимым (см. рис. 9.3).
Если пиктограмма в виде глаза отсутствует, значит, значение видимости установлено
по умолчанию, что обычно указывает на отображение слоя (за исключением случая
с вложенными слоями). (Вложенные слои описываются в следующем разделе.) Если
глаз отрыт, значит, слой включен, т.е. его будет видно в окне браузера. Щелкайте на
пиктограмме до тех пор, пока глаз не закроется. Таким образом, слой будет выключен
и станет невидимым. Он никуда не пропадет, его просто не будет видно в браузере.

ГлаваftСлои, DHTML и поведения

Вложенные слои - одна сча ;ивая семья
Еще одним способом размещения ел-г * является их вложение. Вложенный слой — это
обычный слой, который привязан к другой/, причем между ними осуществляется родственная связь. Первый слой становится родительским, а вложенный в н е ю — дочерним.
Дочерний слой в качестве точки отсчета для позиционирования использует верхний левый
угол родительского слоя, а не документа, так как он находится в рамках родительского слоя.
Эта родственная связь сохраняется, даже если слои находятся в разных частях страницы. При
перемещении первого слоя по странице все вложенные слои перемещаются вместе с ним.
Можно провести аналогию, сравнивая такое поведение с хозяином и его собакой на поводке — куда бы ни пошел хозяин, собака всюду за ним следует, хотя сама она движется независимо (в пределах длины поводка).
Если вы поместите еще один слой в дочерний, то последний станет и дочерним, и родительским. Новый слой будет использовать верхний левый угол своего родительского слоя
(в данном случае являющегося и родительским, и дочерним) в качестве точки отсчета. Первый слой в цепочке вложенных слоев будет управлять всеми дочерними, т.е. все они будут
двигаться при перемещении родителя.
Dreamweaver с помощью вложения позволяет управлять большим количеством слоев
в документе — фактически, именно для этого используются вложенные слои. Вместо того,
чтобы следить за загрузкой различных слоев, разбросанных по странице, можно сгруппировать их в легко управляемые "семейства". После этого будет несложно перемещать все семейство как один элемент. Более того, можно сделать все семейство невидимым или видимым, щелкнув на пиктограмме в виде глаза родительского слоя на панели Layers, если значение видимости дочернего слоя установлено по умолчанию (на панели Layers нет
пиктограммы-глаза). Если видимость дочернего слоя установлена по умолчанию, значение
этого параметра наследуется от родительского слоя. Таким образом можно отображать или
прятать сразу целые семейства. Подобные действия вскоре станут вашей ежедневной практикой. Но не забывайте, что, когда дочерний слой на панели Layers включен (глаз открыт) или
выключен (глаз закрыт), на него не действуют настройки видимости его родительского слоя.
Настройки дочернего слоя должны быть установлены по умолчанию, чтобы он брал значение
параметров видимости из своего родительского слоя.
Для создания вложенных слоев выполните следующие действия.
1. Выполните команду Inserts Layout ObjectsLayer (Вставка^Объекты макета^Слой).
Поле, представляющее слой, появится на странице. Dreamweaver автоматически присвоит ему имя Layerl.
2. Переместите курсор внутрь первого слоя и выберите команду lnsertLayout
ObjectsLayer с целью создать второй слой внутри первого.
3. Разместите второй слой в любой части страницы, перетащив его за небольшую
вкладку в левом верхнему углу или за любую точку его границы.
Вложенные слои не обязательно должны находиться внутри родительских. Они могут
располагаться в любой точке страницы или друг над другом.
4. Выберите Windows Layers, чтобы открыть панель Layers, если она еще не
была открыта.
Откроется панель Layers.
На панели Layers видно, что вложенный слой находится внизу и немного сбоку от своего
родителя. Между ними проведена линия, указывающая на их родственную связь (рис. 9.4).

214

Часть IV. Делаем узел еще кр

Рис. 9.4. Панель Layers позволяет устанавливать видимость и порядок
наложения слоев, а также отображает родственные свози между ними

Установка параметров слоя
Как и в других HTML-элементах, в слоях существуют такие опции, как высота и ширина.
При выборе слоя его опции появляются на панели Properties Inspector.
В следующем списке приведены опции слоя и перечислены их функции.
Layer ID. В верхнем левом углу панели Properties Inspector, сразу под надписью Layer ID, находится текстовое поле, в котором можно ввести имя для
идентификации слоя. Для названия используйте только стандартные буквенно-цифровые символы (не применяйте специальные символы: пробелы, дефисы, косую черту или точки).
L (Слева). В этом параметре определяется расстояние от слоя до левого края
страницы или родительского (внешнего) слоя. Dreamweaver автоматически
вставляет значение в пикселях при создании или перетаскивании слоя. Также
можно самостоятельно вводить числовое значение (положительное или отрицательное) для управления позиционированием.
Т (Сверху). Этот параметр указывает на расстояние от слоя до верхнего края
страницы или родительского (внешнего) слоя. Dreamweaver автоматически
вставляет значение в пикселях при создании или перетаскивании слоя. Также
можно самостоятельно вводить числовое значение (положительное или отрицательное) для управления позиционированием.
W (Ширина). Dreamweaver автоматически определяет ширину при создании
слоя на странице. Вы можете вручную задать числовое значение ширины. Кроме того, допускается изменять единицы измерения с рх (пиксели) на любые из
следующего списка: рс (пики), pt (пункты), in (дюймы), mm (миллиметры), cm
(сантиметры) или % (проценты от родительского значения). Не вставляйте
пробелы между числом и аббревиатурой единицы измерения.
Н (Высота). Dreamweaver автоматически определяет высоту при создании
слоя на странице. Также можно вручную задать числовое значение высоты.
Кроме того, позволяется изменять единицы измерения с рх (пиксели) на любые
из следующего списка: рс (пики), pt (пункты), in (дюймы), mm (миллиметры),
cm (сантиметры) или % (проценты от родительского значения). Не вставляйте
пробелы между числом и аббревиатурой единицы измерения.
Z-index (Z-индекс). Этот параметр определяет положение слоя по отношению к другим слоям, когда они наложены друг на друга. Слои с высокими
значениями располагаются над слоями с низкими. Значения могут быть как
положительными, так и отрицательными.
Изменить порядок наложения проще с помощью панели Layers, а не посредством определенных значений Z-индекса.

ГлаваftСлои, DHTML и поведения

215

Vis (Видимость). Этот параметр управляет отображением или невидимостью
слоя. Его можно использовать с языком сценариев (например, JavaScript) для
динамического изменения отображения слоев.
Существуют следующие значения данного атрибута.
•

Default (По умолчанию). Значение по умолчанию для большинства браузеров совпадает со значением родительского слоя, Если родительский
слой отсутствует, то состояние по умолчанию —-. видимый.

•

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

•

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

Hidden (Скрытый). При данном значении слой всегда прозрачный
(невидимый), независимо от значения родительского слоя. Несмотря на свою
невидимость, все его содержимое будет загружено при просмотре страницы
в браузере. Видимостью можно динамически управлять, применяя JavaScriptповедения (см. раздел "Прикрепление поведений" далее в этой главе).
Bg Image (Фоновое изображение). С помощью этого атрибута можно выбрать фоновое изображение для слоя, точно так же, как и для Web-страницы.
Щелкните на пиктограмме в виде папки, чтобы выбрать изображение, или
введите в текстовое поле имя файла и путь к нему.
Bg Color (Цвет фона). Этот параметр используется для заполнения фона
слоя сплошным цветом. Щелкните на цветовом квадрате, чтобы открыть палитру, из которой можно выбрать цвет. Если вы хотите сделать фон слоя прозрачным, оставьте этот атрибут незаполненным.
Tag (Дескриптор). Данный параметр позволяет выбирать один из CSS-слоев
(дескрипторы или ). Лучше использовать дескриптор .
Overflow (Переполнение). Этот параметр определяет, как содержимое слоя
будет отображаться, если оно превысит указанный размер. (Данный параметр
активен только в CSS-слоях.)
Существуют следующие значения атрибута переполнения.
•

Visible (Видимый). Увеличивает слой с целью отобразить все содержимое. Слой расширяется вниз и вправо. . •,

•

Hidden (Скрыть). Обрезает содержимое слоя, которое в него не помещается, и не предоставляет полосу прокрутки.

•

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

• Auto (Автоматически). При выборе названного значения к слою добавляется полоса прокрутки лишь тогда, когда содержимое вышло за границы.
f

216

Clip (Обрезка). В этом атрибуте определяется, какие части содержимого слоя
будут обрезаться, если слой недостаточно большой, чтобы отобразить все содержимое. Можно указать расстояние от L (Левого края), Т (Верхнего края),
R (Правого края) и В (Нижнего края). Значения могут быть указаны в рх
(пикселях), рс (пиках), pt (пунктах), in (дюймах), mm (миллиметрах), cm
(сантиметрах) или % (процентах от родительского значения). Не вставляйте
пробелы между числовым значением и аббревиатурой единицы измерения.

Часть IV. Делаем узел еще круче

Преобразование слоев в таблицы. Точное позиционирование
для старых браузеров
Если вы хотите аккуратно, с точностью до пикселя, разместить элементы на Webстранице, слои подойдут для этого как нельзя лучше. С помощью слоев можно создать аккуратную разметку, чего нельзя сделать средствами обычного HTML. К сожалению, слои работают только в браузерах версии 4.0 и выше.
Но может потребоваться использовать свойства точной разметки слоев, к тому же, обеспечить поддержку широкой аудитории, включая посетителей, использующих браузеры ниже
версии 4.0. В настоящее время такие браузеры используются редко, но если вам необходимо
осуществить их поддержку, то знайте, что Dreamweaver предоставляет для этого специальное
средство. Вы можете использовать слои для дизайна страницы, а затем в финальной стадии проекта обратиться к таблицам, так как в программе Dreamweaver есть функция преобразования
в HTML-страницу с таблицами такого макета, который был создан с помощью слоев. Построив
макет, использующий слои, а затем преобразовав их в таблицы, можно просто (посредством одной команды) создать версию страницы, которая будет работать в старых браузерах.
Чтобы преобразовать страницу, использующую слои, в страницу, которая работает только
с таблицами, и сохранить разметку, выполните команду Modify^Convert^Layers to Table
(Изменить^Преобразовать^Слои в таблицу). Dreamweaver строит страницу с табличной
структурой, которая повторяет макет со слоями и управляет позиционированием с помощью
ячеек таблицы. {Примечание. Если вы не сохранили страницу, Dreamweaver предложит вам
сделать это перед завершением преобразования, так как данный процесс может существенно
изменить оригинальный дизайн страницы.)

Предположим, вам необходимо будет позже вернуться и изменить макет — редактировать
таблицу для точного позиционирования не простая задача! Не беспокойтесь, чтобы преобразовать таблицы в слои, которые редактируются с целью точного размещения элементов, потребуется выполнить всего одну команду. Выполните команду Mbdify^Gonvert^Tables to
Layers (Изменить1^Преобразовать1^Таблицы в слои) — макет из таблиц будет преобразован
в макет из слоев, в котором несложно переместить элементы с точностью до пикселя. После
завершения преобразуйте страницу в табличный вариант, и вы получите страницу с точно
размещенными элементами, для просмотра которой не нужен браузер версии 4.0 и выше. -

Глава 9. Слои, DHTML и поведения

217

Функция преобразования слоев в таблицу не идеальна, так как посредством слоев
можно порой достичь таких результатов, которые невозможны при использовании
таблиц. Например, нельзя преобразовать страницу, содержащую вложенные слои.
Некоторые дизайнеры используют функцию преобразования слоев в таблицу для
создания нескольких страниц, а затем направляют посетителей к лучшему дизайну,
даже если для этого им приходится подправлять табличную версию страницы, чтобы она хорошо выглядела и без всех DHTML-свойств. В дальнейшем просто используйте команду Save As (Сохранить как), чтобы сохранить вашу преобразованную страницу под другим именем и получить в итоге две ее версии.

JEoHSunue о 2)НТМС
Динамический HTML (DHTML) был довольно высоко оценен. Конечно, DHTML не настолько могущественный, хотя он привносит функциональность в Web-страницу, создание которой было бы невозможным только с помощью HTML. DHTML— это что-то наподобие
HTML на стероидах. DHTML подразумевает использование расширенных методов языков сценариев для создания интерактивной анимации, что невозможно с использованием только
HTML. Динамическое содержимое означает, что можно создавать и изменять наполнение страницы уже после того, как она загрузится в браузер. Какое-то время для добавления динамических эффектов в Web-страницы дизайнеры использовали JavaScript, но посредством DHTML можно изменять атрибуты HTML-дескрипторы, а это означает, что вы имеете возможность создать гораздо больше различных эффектов и заставить их выполняться с гораздо большей скоростью.
Существенный недостаток DHTML, как и любой другой новой технологии, заключается
в неоднозначной его поддержке браузерами, и поэтому некоторые эффекты, созданные с помощью DHTML, будут работать не во всех браузерах и, соответственно, не достаточно широко использоваться в Internet. Ё программу Dreamweaver включены свойства, которые упрощают проектирование страниц, работающих с несколькими браузерами.
Однако DHTML гораздо сложнее для написания, чем обычный HTML. Даже HTMLфреймы, которые считаются сложными стандартами Web-дизайна, выглядят относительно
просто по сравнению с JavaScript и кодом, который необходимо написать для создания
DHMTL. Именно здесь Dreamweaver покажет себя во всей красе. Компания Macromedia добавила целый ряд средств, которые позволяют создавать DHTML-эффекты, даже если вы не
умеете программировать на JavaScript.

Самые захватывающие свойства, использующиеся в World Wide Web в настоящее время,
создаются с помощью Dreamweaver-поведений посредством языка сценариев под названием
JavaScript. Эти поведения являются просто встроенными сценариями — некоторые из них используют DHTML, другие — нет. Все они предоставляют простой способ добавления интерактивности в ваши Web-страницы. Поведения можно применить ко многим элементам HTMLстраницы и даже к самой странице. Писать на языке JavaScript сложнее, чем писать HTML-код,
но не так сложно, как на языке программирования С, C++ или Java. (Нет-нет, Java и JavaScript —
это не одно и то же. Читайте в главе 11 о Java-аплетах и об их отличиях от JavaScript.) Dreamweaver берет на себя всю сложность написания JavaScript-поведений, предоставляя вам простой
и интуитивно понятный интерфейс, который не требует особого внимания к запутанному коду.
Применяя поведения, можно сделать так, чтобы изображения изменялись при попадании
на них курсора мыши пользователя (замена изображений), а также создать анимацию, кото-

218

Часть IV. Делаем узел еще кр

рая бы запускалась, когда посетитель щелкнет на изображении или другом элементе страницы. Комбинируя мощь поведений со слоями, вы получите широкие возможности, которые
помогут сделать страницу эффектной и, к тому же, быстро загружаемой.
Рассмотрим простой пример: если вы кого-то пощекочите, то он засмеется. Dreamweaver называет щекотку "событием", а смех— "действием". Вместе они составляют
Dreamweaver-поведение.
Вы, наверное, уже знакомы с поведением ролловера, когда одно изображение заменяется другим. В этом случае при наведении курсора мыши на изображении является событием. Действие — это переключение одного изображения другим. Ролловеры часто используются в органах перемещения по узлу. При наведении курсора мыши на навигационную
кнопку, последняя подсвечивается. Поведения могут влиять на текст, изображения и слои.

Присоединение поведений
Если вы всегда мечтали добавить на свою страницу интерактивные свойства (например,
вспышку, когда пользователи наводят курсор на изображение или щелкают на ссылке), то вам
придется по душе функция поведений в программе Dreamweaver. Чтобы полностью оценить
работу, выполненную программой, переключитесь в режим Code (Код) перед присоединением поведения и после присоединения, а затем посмотрите, насколько сложный код необходимо вставить, чтобы создать поведения. Если вам не очень понравится то, что вы увидите, не
волнуйтесь, можете спокойно перейти обратно в режим Design и позволить программе
Dreamweaver позаботиться о коде за вас.
При использовании поведений в Dreamweaver вам не придется писать код. Вместо этого вы
будете работать с несколькими диалоговыми окнами и, щелкая мышью, получать интерактивные эффекты. Поведения можно присоединить к странице, ссылке, изображению и почти к любому элементу страницы. Для этого выберите его и укажите действие или событие, которое
должно запустить поведение и собственно выбрать поведение из вкладки Behaviors панели Tag.
В следующей инструкции описывается применение поведения к такому элементу, как
изображение. В Dreamweaver встроено как минимум 20 поведений, поэтому стоит потратить
немного времени на их изучение, чтобы вы в дальнейшем могли их использовать.
Для добавления поведения к элементу страницы выполните следующие действия.
1. Выберите изображение на странице, щелкнув на нем.
Можно выбрать любое изображение, текст или слой на странице и применить к нему
поведение.
Чтобы присоединить поведение ко всей странице, щелкните на дескрипторе
на панели Tag Selector с левой стороны строки состояния внизу окна документа.
2. Выполните команду Window^ Behaviors (Окно Поведения), чтобы открыть
панель Behaviors.
3. В верхнем левом углу панели Behaviors щелкните на знаке "плюс" (+) и выберите поведение Open Browser Window (Открыть окно браузера) в раскрывающемся меню (рис. 9.5).
Откроется диалоговое окно Open Browser Window, далее вы можете указать параметры нового окна браузера.
.
Выберите любое поведение, указанное в раскрывающемся меню.
Вам следует знать, что Dreaweaver-поведения почти всегда должны находиться внутри
дескриптора анкера (), который создается путем заполнения поля Link на панели
< Properties Inspector. Если вы откроете раскрывающийся список Events и увидите совсем немного элементов, это может означать, что выбранное вами изображение ни на

Глава 9. Слои, DHTML и поведения

219

что не ссылается. Данную проблему несложно решить. Выберите изображение и введите в поле Link на панели Properties Inspector javascript:;. Этот код создает ссылку
на изображение, но при этом, браузер не открывает новую Web-страницу при щелчке
на изображении. Теперь в раскрывающемся меню на панели Behaviors вы должны
увидеть больше поведений, которые можно использовать для открытия нового окна.

lext £6titmanзффе!сщвны, поэтому выбор
остается только за вами.
; \ ]4v^V^\ I., J ','.,
\/

2 3 4

t

Часть IV. Делаем узел еще кр

Поскольку Fireworks является сопутствующим средством для Dreamweaver, можно
автоматически обновить изображение в Dreamweaver непосредственно из Fireworks, щелкнув на кнопке Done в Fireworks. Однако запомните, что этого нельзя
сделать в любом другом графическом редакторе. Вы вправе открыть файл в другом графическом редакторе, щелкнув на кнопке Ecjit в программе Dreamweaver, но
вам все равно придется вручную сохранять отредактированное графическое изображение и повторно импортировать его в Dreamweaver. Только Fireworks позволяет по одному щелчку мыши обновить изображение в Dreamweaver.

Otfl jbteofaweatrer к Учгеи/orks:
онМимшацил изоЯ/гаженил
Предположим, что логотип на вашей странице выглядит должным образом, но вы считаете, что оно слишком долго загружается, поэтому его нужно немного сжать. Ранее вы узнали,
как отредактировать файл в редакторе Fireworks прямо из Dreamweaver. В этом примере я покажу вам, как повторно оптимизировать изображение в Fireworks из Dreamweaver, когда требуется изменить только настройки оптимизации/сжатия и нет необходимости вносить в изображение другие изменения.
Чтобы оптимизировать изображение в Fireworks из Dreamweaver, выполните следующие действия.
*
1. Выберите в Dreamweaver изображение.
2. Щелкните на кнопке Optimize in Fireworks (Оптимизировать в Fireworks),
расположенной на панели Properties Inspector (рис. 10.4).

РИС. 10.4. Кнопка Optimize in Fireworks на панели Properties inspector
Откроется диалоговое окно Find Source, в котором программа спросит вас, хотите
ли вы отредактировать исходный файл изображения, которое выбрали.
По умолчанию каждый раз при запуске Fireworks эта команда Dreamweaver должна спрашивать, хотите ли вы открыть существующий файл. Значение по умолчанию можно изменить, выбрав из раскрывающегося списка этого же диалогового
окна Always Use Source PNG (Всегда использовать исходный PNG) или Never
Use Source PNG (Никогда не использовать исходный PNG).
Выберите одну из опций диалогового окна Find Source.
Как уже отмечалось ранее, щелкнув на кнопке Yes, можно выбрать неоптймизированный файл изображения, например, тот, из которого вы создали Web-версию.
Щелкнув на кнопке No, вы откроете текущий файл, выбранный в программе
Dreamweaver (собственно GIF- или JPEG-файл, присоединенный к странице). Таким
образом, в Fireworks будет открыто диалоговое окно оптимизации.

Глава 10. Интеграция Fireworks и Dreamweaver

235

Независимо от того, что вы выбрали в Fireworks, в диалоговом окне Optimize
(Оптимизация) откроется изображение, готовое к экспортированию.
4. На вкладке Optimize диалогового окна Fireworks Optimize выберите новые
настройки оптимизации (рис. 10.5).

Рис. 10.5. Оптимизация изображения вашего документа из
программы Dreamweaver в Fireworks
Можно изменить глубину цвета и установки качества изображения, чтобы уменьшить размер файла, а затем просмотреть получившееся изображение на панели
предварительного просмотра программы Fireworks. В этом окне также вы вправе
обрезать изображение, но не более того.
5. Щелкните на кнопке Update (Обновить).
В программе Dreamweaver изображение будет автоматически обновлено. Если вы
выбрали для редактирования PNG-файл (щелкнули на кнопке Yes в диалоговом окне), то оригинальный PNG-файл не будет затронут — изменятся только результирующий GEF- или JPEG-файл. Если вы обрезали изображение, щелкните на кнопке
Reset Size (Сбросить размер).
^

После щелчка в Fireworks на кнопке Update вы уже не сможете отменить какиелибо действия с помощью команды Undo (Отменить). Внесенные вами изменения
станут постоянными.
Самой эффективной функцией Fireworks, используемой для оптимизации, явля* ется мастер Size Optimize (Оптимизация размера). Вы просто указываете целевой размер, а мастер пропорционально уменьшает количество цветов и уровень
качества, чтобы достичь указанного вами размера. Если после запуска этой команды придется исправить соответствующие параметры, мастер выполнит всю
черновую работу.

236

Часть IV. Делаем узел еще круч

/Заиавка J-ireuzorlcs HTM£
Одним из самых примечательных свойств программы Fireworks является автоматическое
генерирование таблиц и HTML-файлов при редактировании изображений для вашего Webдизайна. Это свойство позволяет разрезать графическое изображение, когда необходимо использовать сложные таблицы для хранения всех его частей. Например, можно воспользоваться Fireworks для создания навигационной панели, а затем разрезать ее, чтобы получить отдельные изображения для каждого элемента перемещения. Единственная проблема заключается в том, как разместить на страницу в Dreamweaver HTML-код, сгенерированный
графическим редактором Fireworks? Так как Fireworks создает HTML-страницу, то ее можно
открыть в Dreamweaver. А если вы хотите поместить данный HTML-код прямо в существующую Web-страницу, то это несложно сделать: просто вставьте его вместе со всеми присоединенными изображениями, щелкнув всего на одной кнопке.
Чтобы вставить таблицу, сгенерированную редактором Fireworks, с разрезанными изображениями в Dreamweaver, выполните ниже перечисленные действия (в этом примере предполагается, что вы знаете, как с помощью Fireworks разрезать изображения и сгенерировать
HTML-таблицы, кроме того, у вас должен быть конечный HTML-файл).
1. Откройте документ и установите курсор в той области, в которой планируется
вставить код. Затем выполните команду Insert^lnteractive lmages«=>Fireworks
HTML (Вставка«=>Интерактивные изображения1^ HTML из Fireworks).
Откроется диалоговое окно Insert Fireworks HTML (Вставка HTML из Fireworks) —
рис. 10.6.

Рис. 10.6. Вставить HTML-код, созданный в Fireworks, можно прям
из Dreamweaver
2. Щелкните на кнопке Browse (Обзор), чтобы выбрать файл для импортирования. После того, как вы его найдете, щелкните на кнопке ОК.
Dreamweaver вставит таблицу и соответствующие изображения из документа Fireworks (рис. 10.7).

НТМС, созданною
После того, как вы вставите HTML из Fireworks в Dreamweaver, на панели Properties Inspector появятся некоторые специальные опции, которые позволяют отредактироват*» в Fireworks изображения и соответствующий им код. На рис. 10.7 видно, что на панели Properties
Inspector находятся новые элементы, которые появляются только при вставке HTMLтаблицы из Fireworks. Одним из них является индикатор исходного PNG-файла изображений
(в данном случае это строка перемещения с несколькими кнопками), а другим — кнопка Edit,
позволяющая отредактировать таблицу в Fireworks.

Гпава 10. Интеграция Fireworks и Dreamweaver

237

File

£dit

insert Modify lext

Commands

| Standard jExpanded 1 Layout

K a t h r y n p . L o r d a b o u t coaching
about kathryn

re&ourcee \ get m touch

Are you single and terrified, discourag
fust plain disgusted with the dating sc

%\ H-*

• ptxets

Рис. /0.7. Б Dreamweaver есть специальная панель Properties Inspector для сгене
в Fireworks HTML-кода с визуальной индикацией исходного PNG-файла
Чтобы отредактировать существующую Fireworks-таблицу в программе Dreamweaver, выполните такие действия.
1. Выберите в документе Dreamweaver таблицу.
HTML, сгенерированный редактором Fireworks и импортированный в Dreamweaver,
становится своеобразным "объектом" со специальными атрибутами, которые указываются на панели Properties Inspector при выбранном "объекте" (рис. 10.7).
2. Щелкните на кнопке Edit, чтобы запустить Fireworks.
Программа попросит найти оригинальный PNG-файл, соответствующий вставленному
HTML-изображению, если не сможет этого сделать самостоятельно. После обнаружения PNG-файла графическое изображение появится в окне документа Fireworks.
3. Внесите требуемые изменения в документ Fireworks.
4. Щелкните на кнопке Done в окне документа Fireworks (рис. 10.8).
HTML-код заново будет сгенерирован, а графическое изображение и код в программе
Dreamweaver будут автоматически обновлены!

238

Часть IV. Делаем узел еще кру

Рис. 10.8. По щелчку на кнопке Done в Fireworks код автоматически обновляется в Dreamwea
после чего от вас больше ничего не потребуется

Глава 10. Интеграция Fireworks и Dreamweaver

239

Глава 11

Добавляем мультимедиа
главе...
>

Добавление Shockwave и Rash-фильмов

>

Создание Flash-кнопок й текст

>

Знакомство со средствами управления Java и ActiveX

>

Использование звуковых, видео- и других мультимедиа-файлов

177

М Ж ш е, кто живет в мире мультимедиа и привык к дискам CD-ROM с музыкой и ви+Jw
Ш* део, вряд ли согласится работать с плоскими текстовыми Web-узяйми. Многие
Web-дизайнеры уверены в необходимости широкого использования интерактивных
свойств. Им требуется анимация, звук, видео — свойства, способные вдохнуть жизнь
в другие элементы. Но с помощью HTML (даже совместно с динамическими HTMLсвойствами) нельзя достичь подобных результатов.
Пришло время обратиться к надстройкам.
Надстройки — это небольшие программы, работающие вместе с Web-браузером и воспроизводящие звук, видео и анимацию. Они называются так, потому что сами являются небольшими приложениями, подключаемыми к браузеру и расширяющими его возможности.
Любой компании под силу создать надстройки, которые позволят браузерам отображать
и использовать новые технологии. Некоторые надстройки стали настолько популярными, что
разработчики браузеров (компании Netscape и Microsoft) решили встроить их в свои последние версии программ. Надстройки, которые менее известны, потребуется загрузить и установить на компьютер, чтобы они могли работать с браузером.
В число хорошо известных надстроек входят Macromedia Shockwave и Flash, Real Network
RealAudio и RealVideo, а также Apple QuickTime. Из этой главы вы узнаете о некоторых типах мультимедиа-технологий и о том, как с помощью программы Dreamweaver поместить эти
файлы на ваши Web-страницы. Будут также даны советы по вопросу создания таких страниц, •
которые бы хорошо работали в разных браузерах. Конечно, существует гораздо больше надстроек, чем описано в этой книге, но в данном издании вы найдете самые важные из них,
а также получите общую информацию, которая поможет вам при изучении раздела "Работа
с другими технологиями надстроек".

с файлами Macromedia
Shockwave и flash
Flash и Shockwave в настоящее время являются наиболее используемыми технологиями
надстроек для Web. И несмотря на то, что у них много общего, компания Macromedia выпускает разные надстройки для форматов Shockwave и Flash. Любой пользователь может загрузить их по отдельности или в одном большом пакете надстроек с Web-узла компании Мае-

romedia. Программное обеспечение для воспроизведения Shockwave и Flash существует как
в виде надстройки для Netscape, так и в виде управляющего элемента ActiveX для Internet Explorer.
Dreamweaver может обработать оба формата Shockwave и Rash, а также другие использующие архитектуру надстройки Netscape.

Что такое Shockwave
Macromedia Shockwave for Director позволяет воспроизводить на Web-странице мультимедиа-файлы, созданные в программе Macromedia Director. Director является самой популярной
программой для создания CD-ROM и других типов форматов мультимедиа, а это означает, что
она имеет большое количество последователей, и, как правило, пользователи знают, как с ней
работать. Shockwave+файл можно узнать по расширению . dcr. Этот формат является одним из
лучших для создания сложных мультимедиа-файлов, например, игр, в которых используется анимация, звук, видео и другие интерактивные свойства (например, способность стрелять по цели или
вести машину). В Shockwave содержится несколько достаточно мощных средств разработки
(например, язык программирования Lingo), которые позволяют создавать сложные интерактивные
функции. Однако, с другой стороны, данную программу сложно изучить даже профессионалу.
Несмотря на то, что Shockwave for Director стала одной из самых популярных надстроек в World Wide Web, существует проблема с размером ее файлов. Исходя из Webстандартов, многие файлы, созданные для CD-ROM, огромны, а пользователи избалованы
скоростью и качеством CD-ROM. По причине ограниченной пропускной способности
World Wide Web разработчики, создающие Shockwave-файлы, сталкиваются со многими
проблемами. Даже учитывая то, что в процессе преобразования файлы Director в Shockwave
несколько уменьшаются в размере, разработчики предпочитают создавать небольшие, простые файлы, которые быстро загружаются. Правда, некоторые дизайнеры все же создают
большие и сложные Shockwave-файлы в надежде, что у пользователей имеется достаточно
широкий канал для того, чтобы насладиться их работой. Как и в любом деле, при создании
мультимедиа-файлов, требующих широкой полосы пропускания, следует учитывать аудиторию, на которую вы нацелены, и тип соединения с Internet, который наиболее вероятно используется посетителями. Более подробную информацию о файлах Shockwave for Director вы
можете найти на узле www. m a c r o m e d i a , c o m / s o f t w a r e / d i r e c t o r .
< O B J E C T > и < E M B E D > для достижения наилучших

;>>.*> фщ ^Я:й т^^М^•:

•'v * - : • tW: *

х»: Когда-то два крупнейших разработчика браузеров выбради

У казенные йыше H T M L ^

де какой-либо элемент, непонятный
ю^Есливкодене
в надстройки б^гдут отображаться 'йёфЙснШё '

Глава 11. Добавляем мультимедиа

241

ГЕЙШа своей W e b - ^
браузеров, Наприм^; вь^вйраве использовать дескриптор для подключения аль;
тернативных GIF- или JPEG-йзображений, выводиййвё1& э^
, если браузер не поддерживает надстройки в принципе или ему не хватает одной из них..
Если вы самостоятельно; кишите код и хотите достичь оптимйШ^ых^резулЬтатот й'обЬих
> ф а у н а х , вста^^
. Добавлять следует именно в таком
порядке, так как браузеры, поддерживающие дескриптор (Internet Explorer), также •
поддерживают и^^есжршггор :,*••поэтому сначала Должен быть представлен;
^_ _-.__. -р ^ ^ ^
-.к ^
•д а р
^ i~ g
. .•
) ,. игнорирую!
р р у5i
его а считывают дескриптор :ч Ниже приведен пример того, как может вьхглядегь 5
ЩЪЛЛкой гф»использойании обоях дескрипторов^ дяя вставки Macromedia Rash-файла: *;&С
i

Гь*1**к*> i w - ^*Vv ^> ч ^ -

^'^

f \ piuginspace=."httfp)/^
,, "{ :
index.^gi?Pl^jPrq^^
type^^api^Iication/; /*r*
й
e
hbc3cwefiafeii? ,width="250" height =^350 v $ p a e " b

г До того, как вы тчн^^Шнбваться по поводу сложности кода, позвольте вас успокоить:
•Dreamweaver сдёякст^всё^Щ вас. Просто,выполняйт% шсяруюши/п^
вё, a Dreaxaweayer позаботится об остальном. Йод продемонстрирован с той целью, *tro~
! бы вы увй^ёйи работ^щш^аммы/ а Д4я тех,кто предаочитает составлять подобные коды*
1
самостд^рй
^1^'^^%
'.
** * 'ж л ' , \ / / '

Чтотакое Rash
Вы, вероятно, много слышали о технологии Flash, но не знаете, что она собой представляет и чем отличается от Shockwave. Во Flash используется так называемая векторная графика.
Эта технология означает, что графика во Flash построена на математических описаниях, которые занимают гораздо меньше места, чем растровая графика, использующаяся в том же
Shockwave. Масштаб векторной графики может быть увеличен или уменьшен так, чтобы заполнить окно браузера без ухудшения качества или размера загружаемого файла. Благодаря
этой способности Flash отлично подходит для использования в World Wide Web. Flash-файл
можно узнать по расширению .swf. И несмотря на то, что в настоящее время Shockwave
поддерживает векторную графику, а во Flash-файлы допускается встраивать растровые изображения, Flash лучше подходит для создания небольших файлов, которые быстрее загружаются.
Как формат, который был специально разработан для World Wide Web, Flash продолжает
пользоваться популярностью, так как позволяет создавать быстро загружаемую анимацию. С его
помощью можно производить масштабируемую, интерактивную анимацию с синхронизацией
звука. И при всем при этом вы получите самые маленькие по размеру файлы по сравнению
с любой другой технологией создания анимации, существующей в World Wide Web. Более
подробно о том, почему Flash-файлы загружаются быстрее, чем другие типы файлов, рассказывается во врезке "Мгновенная загрузка Flash-файлов".

242

Часть IV. Делаем узел еще кр

Тогда возникает вопрос: почему, несмотря на такую производительность в Web, некоторые все же выбирают Shockwave, а не Flash? Director обладает более широким программным
окружением, чем Flash, которое позволяет создавать сложные приложения, в частности игры.
И если не обязателен высокий уровень интерактивности в содержимом узла, к тому же, вы не
склонны разбираться во всех сложностях Director, выбирайте Flash.
Как и Director, Hash имеет свой язык пррграммирования — ActionScript. Конечно,
ActionScript не настолько силен, как Lingo, но его средств достаточно, чтобы взаимодействовать с Web-страницами, иметь доступ к базам данных и создавать сложные Flash-игры. Если хотите увидеть пример, поиграйте, на узле www. banj a . com
в игру Banja, которая построена на Flash с использованием базы данных.

Добавление Shockwave и Flash-фильмов
В этом разделе предполагается, что вы уже создали Shockwave или Flash-фильм, и он готов для размещения на Web-странице. Если у вас нет готового файла, обратитесь к Internet —
там можно найти,немало подходящих примеров. В следующем разделе вы узнаете, как прямо
в программе Dreamweaver создать Flash-кнопки и текст.

Мгновенная загрузка
Flash-файлы довольно быстро загружаются/тШ как в них к
жения. Термин вензЬсриъй} указывает на то, чгб'фобфжп^^
струк1^ий; которые н^кодимы дш! прорисовки опредекращешЬ^^
цветом. Они задашй» тор&жВ^^^ - - < ^ „
ные для каждого Пикселя в[ растровых" й^ражёнйрС^^кюс ">
ва!ним11ртванй»гх GIF:' В^^зудьтйте Rash-файйЙ
ыс^^'р^^^АфЩ
изображений и файлов анимации. Анимированный GEPt 1согб^ый
гружается за минуту при модемном подключении, если <
дет занимать всего 20 Кбайт и загружаться за несколько секунд Фактически, lie.
фильмы длительностью 10 минут и больше можно просмотр&п» вб Flash, rid!
к Internet с помощью обычного модема. Полную информацию по созданию \
rlmacrmiedia.'Com/softwdre/flaeltl^ ** ^% """

вы

Если вам понадобится помощь в использовании Flash, обратитесь к книге Macromedia
Flash MX 2004 для "чайников".
Чтобы добавить существующий Shockwave или Flash-фильм на Web-страницу с помощью
Dreamweaver, выполните следующие действия.
1. Щелкните в той части страницы, в которой требуется поместить Shockwave или
Flash-фильм.
2. На панели Insert (Вставка) выберите пункт Common (Общие), если он не
был выбран.
3. В раскрывающемся меню Media панели Common Insert выберите либо Shockwave, либо Flash (рис. 11.1).
Также вы можете выбрать команду Inserts Media«=> Shockwave (Вставка^Мультимедиа^
Shockwave) или Insert^ Medial Flash (Вставка^Мультимедиа^ИаБЬ). В любом случае откроется диалоговое окно Select File (Выберите файл).
4. В диалоговом окне найдите на своем диске файл фильма, который планируется
вставить на страницу. Щелкните на файле, чтобы его выбрать.

Глава 11. Добавляем мультимедиа

243

Ш
Щ.
Ш.
Ш

«nages
useatracer.Nml
index .html
!amowe.hW
flashnav.htntf

whyabarofcoap.html

Ш

Ш ur»tnfctates.htn*
Ш. beau«fulJ»ride.hWI

Рис. 11.1. В документы можно вставить много разных мультимедиа-файлов
ветствующей пиктограмме панели Insert
5. Щелкните на кнопке ОК.
После щелчка на кнопке ОК диалоговое окно закроется, а код будет вставлен в ваш
документ.
Dreamweaver не отображает файлы надстройки в редакторе при их первоначальной
вставке. Вместо них вы увидите небольшую пиктограмму, обозначающую Shockwave
или Flash-файл. Чтобы просмотреть ваш фильм, щелкните на зеленой кнопке Play
(Воспроизведение) в левой части панели Properties Inspector. При просмотре своей
страницы в браузере вы также увидите Shockwave или Flash-фильм.

Установка параметров и других опций Shockwave и Flash
Как и у большинства HTML-дескрипторов, у дескрипторов, подключающих Shockwave,
Flash и другие файлы надстроек к Web-страницам, есть свои атрибуты (при использовании
с дескриптором они называются параметрами). Эти параметры особенно важны
для файлов надстроек, так как некоторые из них (например, высоту и ширину) следует установить для обеспечения работы файла в браузере. Dreamweaver автоматически устанавливает
высоту и ширину, но вам может понадобитсяизменить некоторые другие настройки.
В этом разделе предоставляется список атрибутов и параметров, которые можно изменить на
панели Properties Inspector, и описание того, на что эти атрибуты влияют.
Не беспокойтесь о правильности установки настроек для дескрипторов
и . Dreamweaver автоматически вносит оба дескриптора. Если вы сами хотите
увидеть код, щелкните на кнопке Code View в верхнем левом углу окна документа.

244

Часть IV. Делаем узел еще кр

Если на панели Properties Inspector отображены не все опции, щелкните на
кнопке расширения в нижнем правом углу, чтобы открыть нижнюю часть панели.
Ниже представлены Flash-опции на панели Properties Inspector (рис. П.2).

Рис. 11.2. Flash-опции на панели Properties Inspector
Поле для имени. Воспользуйтесь текстовым полем в верхнем левом углу панели Properties Inspector справа от пиктограммы Flash, если решили ввести
имя для вашего файла. Это поле можно оставить незаполненным или присвоить имя файлу в любое другое время. Dreamweaver не будет автоматически
присваивать имя, если вы оставите поле пустым. Данное имя необходимо
только для определения файла в сценариях.
W (Ширина). Опция, необходимая для указания ширины файла. Файл измеряется в пикселях, но, вставив сразу после числового значения знак процента
(%), можно указать процентное отношение от ширины окна браузера.
И (Высота). Опция, необходимая для указания высоты файла. Файл измеряется в пикселях, однако, вставив сразу после числового значения знак процента
(%), можно указать процентное отношение от высоты окна браузера.
В раскрывающихся списках для ширины^ высоты вы найдете такие единицы
измерения, как пики. Однако мы не будем на них останавливаться в данной
книге, так как они не совсем корректно поддерживаются программой и редко
используются в World Wide Web.
' File (Файл). Текстовое поле, предназначенное для ввода имени файла и пути
к нему. Значение можно изменить, введя новое имя или путь к файлу либо
щелкнув на пиктограмме в виде папки и выбрав необходимый файл на диске.
Edit (Правка). Позволяет запустить мультимедиа-файл ц другой программе
(Flash), где можно будет отредактировать его, а затем вернуться в Dreamweaver. Не забывайте, что для того, чтобы отредактировать файл, вам понадобится исходный Flash-файл. Если Flash-файлы уже сгенерированы для использования в Web (. swf), их нельзя редактировать.
SfC (Источник). В этом текстовом поле можно указать исходный файл, который использовался для создания . swf-файла для Web. Если эта опция установлена, по щелчку на кнопке Edit исходный файл автоматически открывается во
Flash, а по щелчку на кнопке Done — изменения вносятся в Dreamweaver.
Reset Size (Сбросить размер). Так как Flash-файлы масштабируются без потери качества изображения, часто размер картинки Flash-файла на Web:
странице изменяют. Щелкнув на этой кнопке, можно вернуть Р1а$Пгфайлу его
оригинальный размер.
' Loop (Цикл). При установленном флажке FlashrJ^afiji повторяется (или зацикливается). Если этот флажок не устанавливать, Flash-фильм остановится
на последнем кадре.

Глава 11. Добавляем мультимедиа

245

Autoplay (Автоматическое воспроизведение). Такой флажок контролирует
параметр Play, позволяя определить, будет Hash-фильм воспроизводиться
сразу после загрузки на компьютер или пользователь должен щелкнуть на
кнопке (или выполнить какое-либо другое действие), чтобы начать воспроизведение. При установленном флажке фильм автоматически начнется сразу после завершения загрузки страницы. Если вы не установите этот флажок, во
Hash-файле для воспроизведения фильма потребуется установить одну из опций: onMouseOver или onMouseDown.
V Space (Вертикальное расстояние). Если вы решили вставить свободное место над или под файлом, укажите в этой опции числовое значение в пикселях.
H Space (Горизонтальный интервал). Если вы планируете вставить свободное место с какой-либо стороны файла, именно в этой опции укажите числовое значение в пикселях.
Quality (Качество). Данная опция позволяет установить приоритет сглаживания в изображениях над скоростью воспроизведения. При сглаживании
изображения выводятся на экран менее угловатыми, но при этом замедляется
скорость прорисовки каждого кадра, так как компьютер сначала должен сгладить края. Ниже приведены возможные значения параметра Quality.
•

Low (Низкое). При этой опции сглаживание никогда не используется.
Приоритет скорости воспроизведения выше приоритета отображения.

•

High (Высокое). При этой опции сглаживание всегда включено. Приоритет отображения выше приоритета скорости воспроизведения.

•

Auto High (Автоматически высокое). Более сложная опция Auto High
начинает воспроизведение с включенным сглаживанием. Однако если реальная частота смены кадров, поддерживаемая компьютером пользователя, падает ниже указанной частоты кадров, сглаживание автоматически выключается для увеличения скорости воспроизведения. Эта опция вначале отдает равное предпочтение скорости воспроизведения и отображению, но
при необходимости жертвует качеством изображения в пользу скорости.

•

Auto Low (Автоматически низкое). Если установлена эта опция, воспроизведение начинается с выключенным сглаживанием. Если Flash делает вывод, что процессор справится с работой, сглаживание включается.
Используйте данную опцию для первоначальной отдачи предпочтения
скорости и при любой возможности увеличивайте качество изображения.

Scale (Масштаб). Эта опция используется только тогда, когда указаны значения параметров высоты и ширины в процентах. Параметр Scale позволяет
определить, как будет отображаться Flash-фильм в рамках области, указанной
окном браузера.
Следующие опции раскрывающегося списка Scale позволят установить настройки отображений Rash-фильма в окне.

246

•

Show all (Показать все). С помощью этой опции вы сможете отобразить
весь фильм в указанной области. Поддерживаются оригинальные пропорции высоты и ширины, и искажения не происходит. Однако по бокам
фильма могут появляться границы для заполнения свободного места.

•

No border (Без границ). Опция, позволяющая масштабировать Flashфильм для заполнения указанной области. Поддерживаются оригинальные

Часть IV. Делаем узел еще к

пропорции ширины и высоты, поэтому искажения не происходит, но части
фильма могут быть обрезаны.
• Exact fit (Точно по размеру). Если установлена эта опция, в указанной области вы увидите весь фильм. Однако изображение может быть искажено,
так как пропорции ширины и высоты не соответствуют указанной области.
Align (Выравнивание). Использование данной опции позволяет контролировать выравнивание файла на странице. Данный параметр работает одинаково
как для надстроек, так и для изображений.
BgColor (Цвет фона). В этой опции устанавливается цвет фона, заполняющего область окна для файла. Установленный цвет видно, если указанные высота и ширина больше, чем сам файл, а также в том случае, когда фильм не
воспроизводится при загрузке, либо после завершения.
Кнопка Play. Щелкните на зеленой кнопке Play, чтобы просмотреть Shockwave или Flash-файл прямо в редакторе Dreamweaver. "
Parameters (Параметры). Кнопка, предоставляющая доступ к диалоговому окну, в котором можно ввести дополнительные параметры для Shockwave-фильма.

Создание
3)

cfieqafi£aMU

В Dreamweaver существует функция, использование которой позволяет создавать
и редактировать простые Flash-файлы средствами самого Dreamweaver, что особенно полезно, так как вы сможете использовать Flash на своем Web-узле. В результате не возникает вопрос о покупке еще одной программы, а также о необходимости ее изучения. Несмотря на то,
что вы не сможете таким образом получить действительно впечатляющую Flash-анимацию,
эта функция все же позволяет создавать графические, текстовые объекты и привлекательные
Flash-кнопки с помощью знакомого интерфейса Dreamweaver. В Dreamweaver включена
большая библиотека готовых к использованию Flash-объектов. Так как архитектура Macromedia Flash Objects является; расширяемо^ можно загрузить новые Flash-стили из Internet
или обратиться к Flash-разработчикам, чтобы они создали для вас новые объекты, которые
будут использоваться в редакторе Dreamweaver.
С помощью объекта Flash-текста можно создать и вставить в документ текстовый Flashфильм (.swf). Текстовые Flash-фильмы позволяют использовать векторную и текстовую
графику в выбранном вами шрифте, (векторная графика означает, что изображения состоят из
закодированных инструкций, необходимых для прорисовки геометрических фигур). Ощутимое
преимущество в использовании Flash-текста заключается в том, что позволяется использовать
любой шрифт и не беспокоиться о его наличии на компьютере посетителей. Также можно создать эффект переключающихся изображений, не обращаясь к отдельному изображению, а размер текста масштабируется без особого влияния на качество изображения или размер файла.
Чтобы вставить объект Flash-текста, выполните следующие действия.
1. Сохраните свой Dreamweaver-доку мент.
Документ должен быть сохранен до того, как в него можно будет вставить объект
Rash-текста.
2. На панели Insert (Вставка) выберите пункт Common (Общие), если он не
был выбран.

Глава 11. Добавляем мультимедиа

247

3. В раскрывающемся меню Media (Мультимедиа) на панели Common Insert выберите опцию Flash Text (Flash-текст).
Также можно использовать команду Inserts Media«=>Flash Text (Вставка^Мультимедиа^ИаБЬ-текст).
Откроется диалоговое окно Insert Flash Text (Встаэить Flash-текст), изображенное на рис. 11.3.

Рис. 11.3. В диалоговом окне Insert Flash Text можно
создавать и редактировать интерактивный Flash-текст средствами Dreamweaver
4. Определитесь с опциями текста: шрифтом, начертанием, размером, цветом, выравниванием и т.д.
Чтобы увидеть текст, отформатированный выбранным вами шрифтом, установите
флажок Show Font (Показать шрифт). Далее будут представлены другие опции.
• Rollover Color (Цвет ролловера). Здесь указывается цвет, на который должен будет
смениться текст при наведении на него курсора мыши. Если вы не хотите добавлять этот эффект, сделайте цвет ролловера таким же, как и основной.
• Параметры Link (Ссылка) и Target (Цель) для текста .могут быть установлены в соответствующих полях. Ссылка активизируется, когда пользователь щелкает на тексте.
• Установите параметр Bg Color (Цвет фона) таким же, как цвет фона Web-страницыГ
на которой находится текст.
• В поле Save As (Сохранить как) всегда сохраняйте файл с расширением . swf, только в
этом случае у вас будет создан Rash-файл. Укажите на диске место, где он будет сохранен.
5. Щелкните на кнопке ОК.
Перед тем, как щелкнуть на кнопке ОК, можно щелкнуть, на кнопке Apply (Применить),
чтобы увидеть изменения, внесенные в документ, и при этом не закрывать диалоговое окно.
Диалоговое окно будет закрыто, а Flash-текст вставлен на страницу. Чтобы отредактировать текст или изменить какие-либо его опции, дважды щелкните на нем (в результате диалоговое окно будет открыто).

248

Часть IV. Делаем узел еще к

Если вы заинтересовались созданием WYSIWYG Hash-фильмов, обратитесь к небольшой и недорогой программе Swish. Подробная информация представлена на
узле www. s w i s h z o n e . com.

Создание Flash-кнопок
Flash-кнопки еще больше впечатляют, чем Rash-текст. Они являются заранее созданными
графическими изображениями, которые можно изменить и использовать в качестве интерактивных кнопок на вашем Web-узле. Как и Flash-текст, Flash-кнопки построены на векторной
графике и, соответственно, могут быть масштабированы без ухудшения качества. Dreamweaver поставляется с библиотекой более чем из 50-ти стилей для КНОПОК. Новые стили можно добавлять, если загрузить их из Internet или создать во Flash свои собственные.
Чтобы вставить Flash-кнопку, выполните следующие действия.
1. Сохраните свой Dreamweaver-документ.
Документ должен быть сохранен до того, как в него можно будет вставить объект
Flash-кнопки.
2. На панели Insert (Вставка) выберите пункт Common (Общие), если он не был
выбран.
3. В раскрывающемся меню Media (Мультимедиа) на панели Common Insert выберите опцию Flash Button (Flash-кнопка).
Также можно выбрать команду InsertsMeida^ Flash Button (Вставка1^ Мультимедйа^Назп-кнопка).
Откроется диалоговое окно Insert Flash Button (Вставить Flash-кнопку), изображенное на рис. 11.4.

Рис. 11.4. В диалоговом окне Insert Flash Button можно
создавать и редактировать графическое изображение
интерактивной Flash-кнопки средствами Dreamweaver

Глава 11. Добавляем мультимедиа

249

4. В поле Style (Стиль) укажите тип кнопки, который вы будете использовать.
Выбранный стиль можно просмотреть в поле Sample (Пример).
5. Определите соответствующие опции для вашей кнопки.
В поле Button Text (Текст кнопки) введите текст, который будет написан на кнопке.
Если вы хотите, чтобы она была пустая, оставьте это поле незаполненным. Задайте
другие опции текста: шрифт, начертание, размер, цвет, выравнивание и т.д.
При необходимости укажите в соответствующих полях ссылку, цель и цвет фона.
Всегда сохраняйте файл с расширением . swf, только в том случае у вас будет создан
Flash-файл. Выберите на диске место, где он будет сохранен.
6. После установки всех необходимых опций щелкните на кнопке ОК, чтобы вставить кнопку.
Перед тем, как щелкнуть на кнопке ОК, можно нажать кнопку Apply (Применить), чтобы
увидеть изменения, внесенные в документ, и при этом не закрывать диалоговое окно.
Диалоговое окно будет закрыто, а Flash-кнопка вставлена на страницу. Чтобы отредактировать кнопку или изменить какие-либо ее опции, дважды на ней щелкните — диалоговое окно снова откроется.

Добавление новых стилей кнопок
Так как архитектура Macromedia Rash Objects является расширяемой, можно загрузить новые
Rash-стили из Internet или обратиться к Rash-разработчикам, чтобы они создали для вас новые объекты, которые можно будет использовать в редакторе Dreamweaver. Чтобы получить дополнительные стили с Web-узла Macromedia Exchange, щелкните на кнопке Get More Styles
(Получить дополнительные стили) в диалоговом окне Insert Flash Button. После этого откроется Web-браузер, он подключится к узлу Macromedia Exchange, с которого вы сможете загрузить различные стили кнопок (для этого вы должны быть подключены к Internet).
Компания Macromedia разработала Flash с открытым исходным кодом, поэтому
Rash-файлы можно создавать во многих программах, включая Adobe Illustrator,
в которой существует опция экспортирования в формат SWF. Последние новости
о разработке Flash вы найдете на узде www. openswf. org.

Jaira
Java является языком программирования (как и Pascal, Basic, С или C++), который можно
использовать для создания программ, работающих на компьютере. Что делает Java особенным, так это способность работать на любой компьютерной системе и отображаться в браузере. Обычно при создании компьютерной программы на языке программирования приходится создавать одну ее версию для компьютеров Macintosh, другую — для PC, а третью —
для UNIX. Но язык Java, разработанный компанией Sun Microsystems, является независимым
от платформы, поэтому разработчики могут его использовать для создания любой программы, даже такой сложной, как текстовый редактор или электронные таблицы. Она работает на
любом типе компьютера и не требует изменений для каждой платформы отдельно. Кроме того^бычно программы работают независимо друг от друга. Но в случае с Java программы
(также называемые аплетами) могут работать в рамках Web-браузера, что позволяет им
взаимодействовать с различными элементами страницы или другими страницами в Internet.
Указанные преимущества сделали Java довольно популярным языком, предоставляющим

250

Часть IV. Делаем узел еще кру

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

Добавление Java-аплетов
Чтобы вставить Java-аплет на Web-страницу, выполните следующие действия.
1. Щелкните на своей странице в области, в которой решили добавить аплет.
2. На панели Insert (Вставка) выберите пункт Common (Общие) если он не
был выбран.
3. В раскрывающемся меню Media (Мультимедиа) на панели Common Insert выберите опцию Applet (Аплет) (эта пиктограмма изображена в виде чашки с кофе).
Также можно выбрать команду Inserts Medial Applet (Вставка^Мультимедиа1^ Аплет).
Откроется диалоговое окно Insert Applet (Вставка аплета).
4. Воспользуйтесь кнопкой Browse (Обзор), чтобы найти на диске файл Javaаплета, который вы планируете вставить на страницу.
5. Щелкните на файле, а затем — на кнопке ОК, чтобы закрыть диалоговое окно.
Dreamweaver не отображает аплеты в своей рабочей области. Вместо них вы увидите
небольшую пиктограмму, указывающую на наличие аплета (пиктограмма имеет вид
чашки с кофе, которую вы видели на панели Insert). Чтобы увидеть аплет на своей Webстранйце (единственный способ увидеть его в действии), просмотрите его в браузере
(Navigator 4.0 и выше или Internet Explorer 4.0 и выше), который поддерживает аплеты.
6. Щелкните на пиктограмме аплета, чтобы открыть панель Properties Inspector.
На панели Properties Inspector можно установить достаточно много опций. С их описанием вы ознакомитесь далее.
Если у вас возникли проблемы при просмотре rava^aroieroB, то, вероятнее всего, что
основная причина заключается в старой версии Internet Explorer. Компании Microsoft
и Sun долго и яростно спорили по поводу Java-стандартов, и в результате поддержка
Java была вырезана из ранних версий браузера Internet Explorer. Поэтому, чтобы просмотреть Java-аплеты в старых браузерах компании Microsoft, необходимо загрузить
специальные драйверы Microsoft Virtual Machine или Sun Java Runtime. Если ваши
посетители используют старую версию браузера Internet Explorer, вам следует перенаправить их на узел Windows Update, чтобы они получили более новую версию.

Установка параметров Java и других опций
Как и другие форматы файлов, для которых требуются надстройки или расширенная поддержка браузера, Java-аплеты имеют следующие опции (рис. 11.5).

Рис. 11.5. На панели Properties Inspector можно указать опции для
Java-аплетов

Глава 11. Добавляем мультимедиа

251

I S Applet Name (Имя аплета). В этом поле при необходимости можно ввести
I
имя аплета. Dreamweaver не присвоит имя автоматически, если вы оставите
}
это поле незаполненным. Имя идентифицирует аплет в сценариях.
i /
|

W (Ширина). Эта опция необходима для указания ширины аплета. Ширину
можно указать в пикселях или в процентах (%) от ширины окна браузера.

I S Н (Высота). Данная опция используется для указания высоты аплета. Высоту
|
можно указать в пикселях или в процентах (%) от высоты окна браузера.
| S Code (Код), Dreamweaver автоматически вводит код при добавлении файла. В нем
f
указывается содержимое файла аплета. В данном поле можно указать имя файла
I
или щелкнуть на пиктограмме в виде папки, чтобы выбрать файл на диске.
1 S Base (База). Автоматически указывается при добавлении файла. В параметре
|
Base определяется папка, в которой содержится аплет. Также можно ввести
|
имя каталога.
;; S Align (Выравнивание). Эта опция определяет выравнивание объекта на
|
странице.
Alt (Альтернатива). Данная опция позволяет указать альтернативный файл
(например, файл изображения, которое будет выводиться на экран), если
браузер посетителя не поддерживает Java. Таким образом, посетитель не увидит пиктограмму в виде разорванного файла. Если в этом поле ввести текст,
Dreamweaver впишет его в код с помощью атрибута A l t дескриптора аплета,
и его увидит посетитель. Можно воспользоваться пиктограммой папки и выбрать изображение, тогда посетитель увидит изображение (Dreamweaver автоматически вставит дескриптор внутри открывающего и закрывающего дескрипторов аплета).
' V Space (Вертикальное расстояние). Если вы решили вставить свободное место над или под аплетом, укажите в этой опции числовое значение в пикселях.
' Н Space (Горизонтальный интервал). Если вы планируете вставить свободное место с какой-либо стороны аплета, укажите в этой опции числовое
значение в пикселях.
'
I

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

использование оЯдемпов и элемешнов
управления
Объекты и элементы управления Microsoft ActiveX являются многоразовыми компонентами (похожими на миниатюрные приложения), которые играют роль надстроек для браузера. Работают они только в Internet Explorer и только на платформе Windows, поэтому долгое
время не были широко распространены в Internet. Таким образом, не существует чистого
стандарта иденгифйкйции объектов и средств управлений ActiveX. Но несмотря на это, в редакторе Dreamweaver осуществляется поддержка ActiveX и предоставляется некоторая
гибкость в их использовании, поэтому для элементов управления ActiveX (если вы все-таки
решили их использовать) можно установить параметры.
На панели Properties Inspector для ActiveX отображаются следующие опции (рис. 11.6).

252

Часть IV. Делаем узел еще

Рис. /1.6. На панели Properties Inspector можно указать опции для
объектов и элементов управления ActiveX
Текстовое поле для имени. Воспользуйтесь текстовым полем в верхнем левом углу панели Properties Inspector справа от пиктограммы ActiveX, если
планируете ввести имя для вашего объекта. Это поле можно оставить незаполненным или присвоить имя объекту в любое другое время. Dreamweaver не
будет автоматически присваивать имя, если вы оставите поле пустым. Это
имя необходимо только для определения объекта в сценариях.
W (Ширина). Данная опция используется для указания ширины объекта ActiveX.
Ширину можно указать в пикселях или в процентах (%) от ширины окна браузера.
Н (Высота). Опция, применяемая для указания высоты объекта ActiveX. Высоту
можно указать в пикселях или в процентах (%) от высоты окна браузера.
ClassID (Идентификатор класса). Браузер использует параметр ClassID для
определения средства управления ActiveX. Здесь можно ввести любое значение или выбрать следующие опции из раскрывающегося списка: RealPlayer, Shockwave for Director и Shockwave for Flash.
Embed (Вставка). При установленном флажке Dreamweaver добавляет
в дескриптор . Дескриптор активизирует
Netscape-надстройку при ее наличии и делает ваши страницы более доступными для пользователей браузера Navigator. Dreamweaver автоматически устанавливает значения, которые вы ввели для настроек ActiveX в дескриптор
, для всех эквивалентных Netscape-надстроек.
Source (Источник). В этой опции определяется файл, который будет привязан к дескриптору и использоваться Netscape-надстррйкой.
Align (Выравнивание). Указывается тип выравнивания объекта на странице.
Parameters (Параметры). Щелкните на этой кнопке, чтобы открылось диалоговое окно, в котором можно выбрать дополнительные параметры элемента
управления ActiveX.
V Space (Вертикальное расстояние). Если вы решили вставить свободное место над или под объектом, укажите в этой опции числовое значение в пикселях.
Н Space (Горизонтальный интервал). Если необходимо вставить свободное
место с какой-либо стороны объекта, укажите числовое значение в пикселях.
Base (База). Данная опция позволяет указать адрес URL для элементов
управления ActiveX, чтобы Internet Explorer мог автоматически загрузить их,
если они не установлены в системе пользователя.
(О (Идентификатор). В этой опции определяется необязательный параметр
ActiveX ID. Обратитесь к документации по элементам управления ActiveX,
которые вы используете, и определите, какой параметр необходимо ввести.
Data (Данные). Укажите файл данных для загрузки в элемент управления
ActiveX.

Глава 11. Добавляем мультимедиа

Alt Img (Альтернативное изображение). Данная опция позволяет подключить изображение, которое будет выводиться на экран, если браузер не поддерживает дескриптор .

с qfitfuuiu
Haqanfioete
Чем больше надстроек, тем больше данных необходимо загружать из Web. Существуют
сотни надстроек, предназначенных для Web-страниц. Используя некоторые из них, можно
достичь поразительных результатов: создать на узле звук, видео, различные форматы изображений и даже трехмерные миры и анимацию. Однако с надстройками следует быть весьма
осторожным, может быть, даже более, чем с другими технологиями World Wide Web. Посетители Web-страницы редко получают удовольствие от необходимости загрузки новой надстройки (на ваш взгляд, просто замечательной). Более того, одни пользователи вообще боятся
этой идеи, другие раздражаются лишь при мысли о ней, у третьих просто не хватает аппаратных или программных мощностей, чтобы запустить надстройку. Не заставляйте своих посетителей делать это без особых на то причин.
Вряд ли обрадуется пользователь, если ему придется загружать надстройку только для того, чтобы увидеть ваш логотип, вращающийся в трехмерном пространстве во всем своем великолепии. С другой стороны, если на вашем узле присутствуют интерактивные игры или
трехмерное окружение с комнатой для бесед, предназначенным для пользователей с подобными интересами, отношение к надстройке, которая позволяет поиграть в многопользовательскую игру или попутешествовать в трехмерном окружении, будет иным. Всегда давайте
посетителям знать, куда они попали, прежде чем отправлять* их в путешествие за надстройкой. Используйте хорошо известные технологии (QuickTime, RealPlayer и пакет Shockwave/Rash), так как пользователи либо уже имеют их, либо понимают, что, получив их, смогут применить эти надстройки на других узлах.

Добавление надстроек Netscape Navigator
Поскольку именно компания Netscape выдвинула идею о надстройках к браузеру, в большинстве из них используются оригинальные Netscape-спецификации, необходимые для создания новых надстроек. Чаще всего надстройки для Netscape Navigator также работают и в
Internet Explorer. Кстати, некоторые наиболее популярные надстройки, в том числе RealPlayer,
QuickTime, а также Flash и Shockwave, считаются надстройками для браузера Navigator.

£,•1ч у;:\ *

,

„. —

i ^ L .

,,.. -

''

"

l

i

l

"*v

t

Рис. /3.4. Диалоговое окно ODBC Microsoft Access Setup
6. Щелкните на кнопке Select (Выбрать).
Откроется диалоговое окно Select Database (Выбор базы данных).
7. Найдите базу данных, которую будете использовать, и щелкните на кнопке ОК.
Как видите, путь к базе данных теперь указан в области Database диалогового окна
ODBC Microsoft Access Setup.
8. Щелкните на кнопке Advanced (Расширенные), чтобы указать информацию об
авторизации, если для вашей базы данных потребуется имя пользователя и пароль. В противном случае этого делать не следует.
9. Щелкните в диалоговом окне ODBC Microsoft Access Setup на кнопке OK,
чтобы закрыть его. Затем в диалоговом окне ODBC Data Source Administrator
также щелкните на кнопке ОК, чтобы закрыть и его.

Настройка Dreamweaver MX 2004 для Windows
Подключение к данным в Dreamweaver можно выполнить достаточно быстро. Сперва
укажите локальную информацию об узле, а также информацию об удаленном узле. Эти два
действия описываются в главе 2. Если вы пока не очень разбираетесь в этом процессе, перейдите к указанной главе и выполните приведенные в ней инструкции.
Для данного примера я запустила сервер приложений IIS (или PWS) на том же компьютере, на котором находится Dreamweaver, поэтому соединение настроено локально.
Если ваш IIS или PWS включен, то после того, как в браузере вы введете
h t t p : / / l o c a l h o s t , на экране появится страница, в которой подтверждается, что Webсервер запущен и нормально работает.
Итак, начнем.
1. Создайте новую страницу ASP JavaScript, щелкнув ASP Javascript на начальной странице Dreamweaver.
У вас должен получиться открытый документ с панелью Application.
Щелкните на панели Application (Приложение), чтобы открыть ее, а затем — на
вкладке Databases (Базы данных) — рис 13.5.
Вкладку Database можно открыть, выбрав Window^Databases из главного меню
Dreamweaver.

280

Часть V. Работа с динамическим

содержимым

2. Choose a document feoe.