This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
Создание веб-сайтов в Adobe® GoLive® CS2 250 лучших приемов и советов
Adobe GoLive CS2 ®
®
T H E
2 5 0
B E S T
TIPS and TRICKS Adam Pratt and Lynn Grillo
Создание веб-сайтов в Adobe® GoLive® CS2
2 5 0
Л У Ч Ш И Х
ПРИЕМОВ и СОВЕТОВ Адам Пратт и Линн Гриллё МОСКВА, 2006
УДК 004.4’273 ББК 32.973.26-018.2 П68 Пратт А. и Греллё Л. П68 Создание Web-сайтов в Adobe® GoLive® CS2. 250 лучших приемов и советов / Адам Пратт и Линн Гриллё ; Пер. с англ. Осипова А. И. – М. : ДМК Пресс, 2006. – 384 с. : ил. ISBN 5-94074-082-0 Данная книга посвящена созданию веб-сайтов в Adobe GoLive CS2 и Adobe Creative Suite 2. Если вы хотите изучить программу GoLive до мельчайших подобностей, эта книга для вас. Приведенные в ней советы сгруппированы тематически, что облегчает их восприятие. Освоив мощные инструменты веб-дизайна, которые предоставляет GoLive CS2, вы быстро превратитесь из новичка в настоящего профессионала. Если вы уже знакомы с программой GoLive, то сможете изучить новые функции, начиная от интерфейса мыши в каскадных таблицах стилей (CSS) и заканчивая интеграцией приложения в набор Creative Suite. Книга Адама Пратта и Линн Гриллё, специалистов компании Adobe, – это настоящий кладезь ценной информации о HTML-редакторе GoLive. Все сведения о программе представлены в форме лаконичных советов. Книга написана увлекательно и с чувством юмора.
Все права защищены. Любая часть этой книги не может быть воспроизведена в какой бы то ни было форме и какими бы то ни было средствами без письменного разрешения владельцев авторских прав. Материал, изложенный в данной книге, многократно проверен. Но, поскольку вероятность технических ошибок все равно существует, издательство не может гарантировать абсолютную точность и правильность приводимых сведений. В связи с этим издательство не несет ответственности за возможные ошибки, связанные с использованием книги.
ISBN 0-321-33541-4 (англ.) ISBN 5-94074-082-0 (рус.)
Счастливого тебе отдыха на пенсии, папа. Я люблю тебя! Адам Моему замечательному мужу Джо (Joe) и моему милому мальчику Никко (Nicco). Пора отдохнуть! Линн
Благодарности Благодарить людей, которые помогли нам написать эту книгу, приятно само по себе. И причина не только в том, что мы можем отплатить за помощь, но и в том, что это значит, что работа над книгой наконец-то завершена! Сейчас мы вспоминаем, с каким трудом давался нам этот проект, и искренне удивляемся, что эта книга увидела свет. Разумеется, мы не смогли бы добиться результата без поддержки команды редакторов и разработчиков издательства Peachpit, особенно Корбина Коллинза (Corbin Collins), Симми Кавер (Simmy Cover) и Бекки Морган (Becky Morgan). Их пристальное внимание к графическим деталям и содержанию книги существенно упростило нашу задачу. Мы выражаем благодарность и другим сотрудникам компании Adobe. Прежде всего, мы признательны всем членам команды GoLive за то, что они постоянно внедряют новые инициативы и создают новые программы и инструменты. И, что еще важнее, мы говорим им «спасибо» за то, что они быстро и подробно отвечали на все технические вопросы, которые возникали у нас во время работы. Вы помогли избежать многих проблем, потому что мы работали с бета-версией программы, которая не содержала меню подсказок. Отдельно благодарим Дженса С. Неффи (Jens C. Neffe), который помогал нам как днем, так и ночью, а также Марка Эриксона (Mark Erickson) за его вклад в GoLive SDK. Спасибо всем сотрудникам отделов по развитию продукта и маркетинга GoLive за их поддержку: Уитни Макклири (Whitney McCleary), Джорджу Арриола (George Arriola) и Девину Фернандесу (Devin Fernandez). Благодарим Терри Уайта (Terry White), менеджера по техническим ресурсам компании Adobe (другими словами, нашего начальника) за то, что он освободил нас от лишней работы в момент, когда у нас было очень мало свободного времени. Спасибо Джеффри Уорноку (Jeffery Warnock) из издательства Adobe Press, который помогал нам при выходе первого издания книги. Также мы благодарим всех разработчиков GoLive, которые позволили воспользоваться их программным обеспечением для тестирования. Оба автора выражают благодарность своим супругам за то, что они не мешали нам во время долгой ночной работы. Спасибо за вашу поддержку! Обещаем: не менее двух недель мы будем выключать компьютеры ровно в полночь. И наконец, Адам благодарит Линн, а Линн благодарит Адама. Нам очень приятно работать вместе.
7
Содержание Благодарности ..................................................................................................... 6 Введение Глава 1
Работа в режиме Outline Editor.............................................. 133
СОВЕТ 86
Работа с элементами и атрибутами в режиме Outline Editor ........................................................... 134
СОВЕТ 87
Поиск ошибок на странице с помощью режима Outline Editor ........................................ 135
СОВЕТ 88
Добавление отсутствующих конечных тэгов в режиме Outline Editor ........................................................... 136
СОВЕТ 89
Просмотр изображений в режиме Outline Editor .............. 137
СОВЕТ 90
Разворачиваем и сворачиваем режим Outline Editor......... 138
СОВЕТ 91
Отображение информации об атрибутах Name и ID в режиме Outline Editor ........................................................... 140
СОВЕТ 92
Просмотр веб-страниц в программе GoLive ...................... 141
СОВЕТ 93
Визуализация с использованием функции Live Rendering.......................................................... 142
СОВЕТ 94
Просмотр страниц в веб-браузерах...................................... 144
СОВЕТ 95
Экспорт веб-страниц в формат PDF .................................... 145
СОВЕТ 96
Настройка параметров файла формата PDF ...................... 146
СОВЕТ 97
Использование функции PDF Presets .................................. 147
СОВЕТ 98
Изменение размера и полей страницы в PDF-файле ........ 149
СОВЕТ 99
Добавление метаданных в PDF-файл .................................. 150
СОВЕТ 100 Скрываем фон страницы в PDF-файле ............................... 151 СОВЕТ 101 Управление разрывами страниц при конвертировании в формат PDF ................................... 152 СОВЕТ 102 Создание защищенных документов в формате Adobe PDF .............................................................. 154 СОВЕТ 103 Работа со ссылками в формате PDF ..................................... 155 СОВЕТ 104 Встраивание в PDF-документы фильмов и объектов мультимедиа ........................................................ 158 СОВЕТ 105 Работа с примечаниями в PDF-документе .......................... 159 СОВЕТ 106 Конвертирование отдельных страниц ................................. 160 СОВЕТ 107 Конвертирование веб-сайтов в формат PDF ...................... 161
Содержание
11
Глава 5
Работа с каскадными таблицами стилей ............ 163
СОВЕТ 108 Изучаем CSS Editor .................................................................. 164 СОВЕТ 109 Активация панели кнопок CSS ............................................. 166 СОВЕТ 110 Использование ниспадающих меню.................................... 167 СОВЕТ 111 Вкладки в CSS Editor ................................................................ 168 СОВЕТ 112 Использование списка Properties в CSS Editor .................... 170 СОВЕТ 113 Сортировка стилей .................................................................. 171 СОВЕТ 114 Поиск правил CSS с помощью функции Quicksearch ...... 172 СОВЕТ 115 Переход к параметрам CSS ..................................................... 173 СОВЕТ 116 Создание примечаний и папок CSS ...................................... 174 СОВЕТ 117 Использование вкладки CSS в окне Site .............................. 175 СОВЕТ 118 Отслеживание CSS-правил с помощью палитры In & Out Links ..................................... 176 СОВЕТ 119 Создание файла CSS по умолчанию для веб-сайта ................178 СОВЕТ 120 Применение CSS-стилей......................................................... 179 СОВЕТ 121 Просмотр CSS-стилей ............................................................. 181 СОВЕТ 122 Просмотр информации о каскадной таблице стилей ..........182 СОВЕТ 123 Ссылка на CSS Editor из палитры CSS.................................. 183 СОВЕТ 124 Применение внешней таблицы стилей к нескольким страницам ........................................................ 184 СОВЕТ 125 Экспорт встроенных стилей .................................................. 185 СОВЕТ 126 Использование CSS-шаблонов.............................................. 186 СОВЕТ 127 Удаление подчеркивания ссылок .......................................... 188 СОВЕТ 128 Создание эффектов Rollover при работе с таблицами стилей ................................................................. 189
Глава 6
Автоматизация повторяющихся заданий ........ 191
СОВЕТ 129 Навигация по палитре Library ............................................... 192 СОВЕТ 130 Использование фрагментов .................................................. 193 СОВЕТ 131 Использование компонентов ................................................ 194 СОВЕТ 132 Использование подписи ......................................................... 196 СОВЕТ 133 Создание шаблона ................................................................... 197 СОВЕТ 134 Создание страниц из шаблона .............................................. 199 СОВЕТ 135 Создание вложенных шаблонов ........................................... 201 СОВЕТ 136 Переназначение шаблонов .................................................... 202
Содержание
12
СОВЕТ 137 Отсоединение шаблонов ........................................................ 204 СОВЕТ 138 Использование образцов шаблонов .................................... 205 СОВЕТ 139 Проверка орфографии ........................................................... 206 СОВЕТ 140 Изменение документов на всем сайте.................................. 207
Глава 7
Интеграция в пакет Creative Suite............................ 209
СОВЕТ 141 Smart Objects ............................................................................. 210 СОВЕТ 142 Оптимизация изображений с помощью функции Save For Web ...................................... 212 СОВЕТ 143 Использование в качестве Smart Object изображений большого размера в формате JPEG ............. 214 СОВЕТ 144 Работа с исходными и конечными файлами ...................... 215 СОВЕТ 145 Обмен объектами Smart ......................................................... 216 СОВЕТ 146 Интеграция с Photoshop или ImageReady CS2 СОВЕТ 147 Оптимизация макетов, созданных в Photoshop ................. 218 СОВЕТ 148 Настройка текстовых переменных ....................................... 219 СОВЕТ 149 Преобразование текста в изображения ............................... 220 СОВЕТ 150 Использование ImageReady CS2 СОВЕТ 151 Настройка переменных ImageReady SWF ........................... 223 СОВЕТ 152 Создание значков favicons ...................................................... 225 СОВЕТ 153 Создание PDF-галерей ............................................................ 227 СОВЕТ 154 Обрезка объектов Smart.......................................................... 228 СОВЕТ 155 Масштабирование объектов Smart ....................................... 229 СОВЕТ 156 Маскирование объектов Smart .............................................. 231 СОВЕТ 157 Отслеживание изображе/ний ................................................ 232 СОВЕТ 158 Организация Smart Objects .................................................... 233 СОВЕТ 159 Обновление страниц с помощью Smart Objects................. 234
Глава 8
Процесс взаимодействия между программами InDesign и GoLive .............. 235
СОВЕТ 160 От InDesign к GoLive ............................................................... 236 СОВЕТ 161 Выборочная упаковка элементов из программы InDesign ........................................................... 238 СОВЕТ 162 Экспорт страниц в формате HTML ...................................... 239 СОВЕТ 163 Настройка функции HTML Export ....................................... 240 СОВЕТ 164 Поиск и выбор объектов для упаковки ............................... 241
Содержание
13
СОВЕТ 165 Просмотр эскизов страниц в списке Assets......................... 242 СОВЕТ 166 Использование слоев InDesign для настройки веб-дизайна .................................................... 243 СОВЕТ 167 Перемещение из программы InDesign текста, таблиц, изображений и фильмов ......................................... 244 СОВЕТ 168 Настройка параметров конвертирования текста ............... 246 СОВЕТ 169 Конвертирование текстовых стилей InDesign в формат CSS ............................................................................ 247 СОВЕТ 170 Распределение крупных текстовых фрагментов между несколькими веб-страницами .................................. 248 СОВЕТ 171 Поиск задействованных объектов ........................................ 250 СОВЕТ 172 Использование XML-тэгов программы InDesign .............. 251 СОВЕТ 173 Добавление текста в виде изображений .............................. 253 СОВЕТ 174 Повторное пакетирование документов InDesign для GoLive ................................................................................. 254 СОВЕТ 175 Автоматическое конвертирование в веб-страницу только текста ..........................................................................................255 СОВЕТ 176 Извлечение добавленных текстовых компонентов .......... 256 СОВЕТ 177 Конвертирование в формат HTML с помощью Adobe Acrobat ..................................................... 257
СОВЕТ 178 Создание эффектов Rollover .................................................. 260 СОВЕТ 179 Использование функции Automatic Rollover Detection (Автоматическое распознавание эффектов Rollover) ....... 261 СОВЕТ 180 Использование эффектов JavaScript Actions ...................... 263 СОВЕТ 181 Создание удаленных эффектов Rollover ............................. 264 СОВЕТ 182 Отображаем и скрываем слои ............................................... 266 СОВЕТ 183 Открываем новые окна ........................................................... 268 СОВЕТ 184 Произвольная настройка изображений .............................. 269 СОВЕТ 185 Работа с двумя фреймами ...................................................... 271 СОВЕТ 186 Поиск и установка новых действий ..................................... 272 СОВЕТ 187 Библиотека JavaScript Library ................................................ 273 СОВЕТ 188 Выделение действий ................................................................ 275 СОВЕТ 189 Копирование и вставка действий ......................................... 276 СОВЕТ 190 Очищаем меню Actions........................................................... 277
Содержание
14
СОВЕТ 191 Создание форм ......................................................................... 278 СОВЕТ 192 Создание списка форм ............................................................ 280 СОВЕТ 193 Автоматизация создания сложных форм ........................... 281 СОВЕТ 194 Добавление на страницу объектов QuickTime и SWF ...... 283 СОВЕТ 195 Добавление на страницу объектов Real ............................... 284 СОВЕТ 196 Добавление на страницу объектов Windows Media........... 285 СОВЕТ 197 Добавление на страницу аудио в формате MP3 СОВЕТ 198 Создание слайд-шоу QuickTime ........................................... 287 СОВЕТ 199 Создание карт изображений .................................................. 291
Глава 10 Сложное управление сайтом ....................................... 293 СОВЕТ 200 Создание диаграмм для новых сайтов ................................. 294 СОВЕТ 201 Управление файлами на палитре In & Out Links ............... 300 СОВЕТ 202 Устранение неполадок на вкладке Errors (Ошибки) ......... 302 СОВЕТ 203 Изменение ссылок на сайте ................................................... 305 СОВЕТ 204 Использование команд Find и Replace в документе .......... 306 СОВЕТ 205 Использование команд Find и Replace в нескольких документах ....................................................... 308 СОВЕТ 206 Сохранение и загрузка результатов поиска ........................ 310 СОВЕТ 207 Поиск ресурсов сайта .............................................................. 311 СОВЕТ 208 Поиск различий между файлами ......................................... 312 СОВЕТ 209 Запуск запросов для сайта ...................................................... 313 СОВЕТ 210 Изучение коллекций ............................................................... 315 СОВЕТ 211 Очистка сайта ........................................................................... 316
Глава 11 Публикация вашего сайта ............................................. 317 СОВЕТ 212 Создание и редактирование настроек сервера ..................... 318 СОВЕТ 213 Тестирование серверных подключений .............................. 319 СОВЕТ 214 Использование соединения Secure FTP ............................... 320 СОВЕТ 215 Вводим настройки протокола FTP для веб-сайтов ............ 321 СОВЕТ 216 Подключение к серверу, на котором размещен сайт ......... 322 СОВЕТ 217 Подключение к нескольким серверам ................................. 323 СОВЕТ 218 Загрузка файлов на сервер ..................................................... 324 СОВЕТ 219 Обработка скрытых файлов .................................................. 326 СОВЕТ 220 Синхронизация обновления файлов ................................... 327
Содержание
15
СОВЕТ 221 Синхронизация файлов и удаление лишних файлов с сервера ...................................................................... 328 СОВЕТ 222 Упрощение исходной кодировки ......................................... 330 СОВЕТ 223 Использование встроенного FTP- клиента ......................... 331 СОВЕТ 224 Устранение неполадок с помощью журналов сервера ..... 332 СОВЕТ 225 Поиск файлов в окне Local File Browser или в Adobe Bridge ................................................................... 333
Глава 12 Создание версий файлов с помощью Adobe Version Cue ................................................................. 335 СОВЕТ 226 Введение в Version Cue ............................................................ 336 СОВЕТ 227 Создание проекта Version Cue ............................................... 337 СОВЕТ 228 Активация сайта Version Cue ................................................. 341 СОВЕТ 229 Сохранение версии страницы ............................................... 342 СОВЕТ 230 Восстановление предыдущей версии страницы ................ 344 СОВЕТ 231 Сравнение двух различных версий ...................................... 345 СОВЕТ 232 Использование функции управления ссылками в приложении Version Cue...................................................... 346 СОВЕТ 233 Синхронизация файлов с помощью Version Cue .............. 348 СОВЕТ 234 Работа в режиме Offline и размещение сайта .................... 349 СОВЕТ 235 Резервное копирование проектов Version Cue ................... 351
Глава 13 Действия и расширения, предлагаемые другими компаниями ........................................................ 353 СОВЕТ 236 Установка расширений ........................................................... 354 СОВЕТ 237 Создание ниспадающих меню DHTML ............................... 355 СОВЕТ 238 Добавление корзины для покупок ....................................... 356 СОВЕТ 239 Добавление элементов интерфейса PayPal ......................... 358 СОВЕТ 240 Удаление ненужной кодировки............................................. 360 СОВЕТ 241 Определяем совместимость с обновлением SWF .............. 361 СОВЕТ 242 Просмотр компонентов Server Side Includes в редакторе Layout Editor ........................................................ 362 СОВЕТ 243 Добавление системы поиска .................................................. 364 СОВЕТ 244 Автоматическое конвертирование гиперссылок ............... 365 СОВЕТ 245 Разработка сайтов данных с помощью OmniPilot Lasso ................................................... 366 СОВЕТ 246 Добавление ссылки Tell a Friend (Расскажи другу)............ 368
Содержание
16
СОВЕТ 247 Создание интерактивных слайд-шоу .................................. 370 СОВЕТ 248 Добавление на страницу области прокрутки ..................... 372 СОВЕТ 249 Проверка ввода данных в полях формы ............................. 373 СОВЕТ 250 Действия DJ Design .................................................................. 375
Приложение ....................................................................................................... 377 Ресурсы GoLive в сети Internet ............................................................ 377 РЕСУРсы Adobe ............................................................................................... 377 СОВЕТ ы и руководства ................................................................................. 377 СПИСКи и форумы ........................................................................................ 378 ДЕЙСТвия и расширения .............................................................................. 378
Содержание
17
Содержание
Введение Эта книга была написана двумя энтузиастами, Адамом Праттом и Линн Гриллё, которых вдохновила любовь к программе Adobe GoLive. Разрываясь между компьютером и телефоном, выкраивая время для перелетов и презентаций, они смогли с присущим им юмором написать книгу, посвященную созданию вебсайтов в Adobe GoLive CS2 и Adobe Creative Suite 2. Если вы действительно хотите работать с программой GoLive, эта книга для вас. Она разбивает сложные концепции на небольшие блоки и позволяет объединить их в процесс. Вы быстро превратитесь из новичка в настоящего профессионала и освоите мощные инструменты веб-дизайна, которые предоставляет GoLive CS2. Если вы уже знакомы с этой программой, то сможете изучить новые функции. Я исхожу из собственного опыта, который приобрела во время чтения книги «Adobe GoLive CS Tips and Tricks» (Создание веб-сайтов в Adobe GoLive CS). Я возила ее с собой по трем континентам, исписала страницы своими замечаниями, обливала ее кофе и роняла на нее бутерброды. Благодаря этой книге я освоила работу с окном GoLive Site, с объектами Smart, научилась создавать CSSстраницы, добавлять интерактивные элементы и делать многое другое. Для меня самое важное – перенимать опыт таких замечательных учителей, как авторы данной книги. В каждом их слове видна их любовь к GoLive, которая не может не вдохновлять. Новая версия программы Adobe GoLive содержит мощные функции, начиная от интерфейса мыши в CSS и заканчивая интеграцией в Creative Suite. Команда GoLive должна благодарить Адама и Линн за их энтузиазм в описании программы. Издание «Adobe GoLive CS2 Tips and Tricks» – это настоящий кладезь информации о приложении GoLive. Наслаждайтесь! Уитни Макклири (Whitney McCleary), старший менеджер по маркетингу продукции компании Adobe GoLive
17
ГЛАВА 2.
Работа с сайтами Программа GoLive предназначена не только для создания, но и для управления веб-сайтами. Помните: вы создаете вебсайты, состоящие из страниц, изображений и ссылок, а не отдельные веб-страницы. Если вы не умеете управлять сайтами, то можете запутаться в куче файлов, связанных гиперссылками. Работа в программе GoLive без окна Site (Сайт) напоминает вождение автомобиля без колес, – теоретически это возможно, но зачем так усложнять свою жизнь? Управление сайтами – это одна из сильных сторон программы GoLive, и умелое использование окна Site здесь очень важно. Освоив работу с окном Site, вы поймете, каким образом оно позволяет устранить пропущенные изображения или разорванные ссылки на вашем сайте. Вы по достоинству оцените три режима работы с сайтами в GoLive. Меню команды Undo существенно облегчит задачу. Изучите окно Site. Доверяйте ему. Работайте с ним и экономьте свое время и нервы. Приступим.
02_GoLive_T&T_(017-038)_rus.indd 17
21.12.2005 1:00:31
18 СОВЕТ
14
Создание новых сайтов
Выберите пункты меню File New (Файл Создать), чтобы открыть мастер GoLive Site Wizard. Вы увидите диалоговое окно, которое позволяет создавать различные типы документов, включая новые сайты. Слева располагается список категорий; первая категория – это Site (Сайт). Выберите данную категорию, чтобы просмотреть в центральном окне список опций, включающий Create Site (Создать сайт), Connect to Site (Подключиться к сайту), а также примеры существующих сайтов. Если вы выберите пункт Create Site, мастер Site Creation Wizard (справа в окне New) предложит вам три опции. Если вы начинаете создание сайта с нуля, выберите пункт Blank Site (Пустой сайт). Если на вашем жестком диске уже содержатся файлы или часть сайта, выберите пункт Site from Existing Content (Сайт, содержащий существующие файлы). Если у вас есть файл поиска сайта, использующийся компаниями-партнерами Adobe, выберите пункт Site from a «Site Locator» file (Сайт из файла поиска). Файл поиска автоматически введет адрес нужного сайта. Если вы собираетесь работать с уже существующим сайтом на сервере, но не имеете копии файлов, выбрав в среднем окне опцию Connect to Site, вы сможете загрузить файлы через протокол FTP или HTTP. Чтобы создать новый сайт, выберите в списке пункт Create Site, нажмите переключатель Blank Site, а затем нажмите кнопку Next (Далее). См. рис. 14.1.
Рис. 14.1. При создании нового сайта с нуля нажмите переключатель Blank Site
ГЛАВА 2
02_GoLive_T&T_(017-038)_rus.indd 18
Работа с сайтами
21.12.2005 1:00:40
19
На следующем экране необходимо ввести название сайта, а также указать адрес сайта на вашем жестком диске или в сети (рис. 14.2). Затем нажмите кнопку Next.
Рис. 14.2. Введите название сайта и нажмите кнопку Browse, чтобы указать его адрес. Название сайта необязательно должно соответствовать его доменному имени
Если вам нужно работать на сайте вместе с другими пользователями GoLive, или вы хотите воспользоваться системой управления версиями, выполните команду Use Version Control (Использовать управление версиями), а затем выберите нужную опцию в ниспадающем меню Version Control System (Система управления версиями). Затем понадобится ввести в полях необходимую информацию, например, ваше имя пользователя и пароль. Если вы не хотите этого делать, выберите опцию Don’t Use Version Control (Не использовать управление версиями) и нажмите кнопку Next (рис. 14.3).
Рис. 14.3. Если вы не планируете работать на сайте вместе с другими пользователями, выберите опцию Don’t Use Version Control
СОВЕТ 14: Создание новых сайтов
02_GoLive_T&T_(017-038)_rus.indd 19
21.12.2005 1:00:40
20 Информация для протокола FTP Если вы никогда не создавали веб-сайты, вам будет непросто ввести информацию в полях настройки соединения FTP. Эти сведения вам должен предоставить провайдер услуг Internet, которому принадлежит сервер.
Наконец, вы должны ввести информацию о сервере для вашего сайта (рис. 14.4). Здесь вы указываете сервер, который будет содержать сайт. Выберите краткое название для сервера, чтобы упростить его поиск в дальнейшем. Выберите в ниспадающем списке протокол (например, FTP или HTTP), а затем введите ваше имя пользователя и пароль.
Рис. 14.4. Введите информацию о сервере, включая его имя, ваше имя пользователя и пароль. Это позволит загрузить ваш сайт на сервер из программы GoLive CS2
Чтобы выбрать папку для хранения страниц, щелкните по небольшой кнопке в виде папки справа в поле Directory (Папка). Вы сможете найти нужную папку на сервере. Когда вы выберете папку, путь к ней автоматически отобразится в поле Directory. Подсказка: в сети Internet понятия «директория» и «папка» – это одно и то же.
ГЛАВА 2
02_GoLive_T&T_(017-038)_rus.indd 20
Работа с сайтами
21.12.2005 1:00:40
21 СОВЕТ
15
Создание новых сайтов с помощью шаблонов
Вам знакомо чувство, которое появляется, когда вы видите перед собой пустой лист бумаги и понимаете, что вы должны записать на нем свои идеи? Проще всего начинать работу с какой-то отправной точки. Программа GoLive CS2 предлагает шаблоны сайтов, которые позволяют быстро создать новый сайт, а также изучить ряд полезных функций. Выполните команду File New, чтобы открыть диалоговое окно New. Выберите слева в списке категорию Site, затем в среднем окне выберите один из пяти типов шаблонов: Web Samples, Mobile Samples, Scripting Samples, Co-Author Samples или Further Samples . В правом окне выберите первый объект в списке и воспользуйтесь клавишами со стрелками для просмотра списка (рис. 15.1). Каждый образец содержит небольшое изображение, которое показывает макет сайта, а также текстовую информацию о содержимом сайта.
Ваш собственный образец Если вы создали сайт и хотите использовать его в качестве шаблона для других сайтов, можно его сохранить. Скопируйте сайт в папку: Adobe GoLive CS2/Settings/ DocumentStore/Sites. При перезапуске программы ваш сайт появится в диалоговом окне New вместе с установленными шаблонами.
Рис. 15.1. В диалоговом окне New вы увидите окно предварительного просмотра сайта и текстовое описание для каждого примера в GoLive CS2
Определившись с выбором шаблона, нажмите кнопку Next и выполните действия, описанные в Совете 14.
СОВЕТ 15: Создание новых сайтов с помощью шаблонов
02_GoLive_T&T_(017-038)_rus.indd 21
21.12.2005 1:00:41
22 СОВЕТ
16 Воспользуйтесь мышью Совет по импорту сайта из существующих файлов: вместо того, чтобы нажимать кнопку Browse для поиска корневой папки сайта, с помощью мыши переместите папку или домашнюю страницу в мастере Site Wizard. Программа GoLive CS2 найдет путь к сайту , и вы сможете нажать кнопку Next, чтобы перейти к следующему пункту.
Импорт существующих сайтов
Часто бывает так, что вы хотите загрузить в программу GoLve существующие сайты, которые были созданы в других редакторах или даже закодированы вручную. GoLive CS2 импортирует такие сайты, создает новые файлы сайтов GoLive и начинает отслеживать все существующие ссылки. Чтобы импортировать существующий сайт в GoLive, выполните команду File New, выберите в списке категорий пункт Site, выберите в среднем окне опцию Create Site и нажмите переключатель Site from Existing Content в мастере Site Creation Wizard справа. Когда вы нажмете кнопку Next, вы увидите три опции импорта сайта (рис. 16.1).
Рис. 16.1. Во время импорта существующего сайта в GoLive CS2 вас спросят, хотите ли вы загрузить сайт из папки на вашем диске, с сервера или из системы управления версиями
Если вы выберете опцию Import from a Local Folder of Existing Files (Импортировать из локальной папки с файлами) и нажмете кнопку Next, вас попросят найти папку. Нажмите кнопку Browse (Выбрать) и выберите корневую папку сайта, то есть папку с домашней страницей. Выполните в мастере действия, описанные в Совете 14. Две другие опции требуют больше внимания. Чтобы импортировать сайт с сервера или из системы управления версиями, необходимо знать имя и местоположение сервера, а также имя пользователя и пароль. Если у вас нет такой информации, обратитесь к провайдеру услуг Internet, которому принадлежит сервер, в отдел IT или к системному администратору. После ввода нужных сведений выполните действия, описанные в Совете 14.
ГЛАВА 2
02_GoLive_T&T_(017-038)_rus.indd 22
Работа с сайтами
21.12.2005 1:00:41
23 СОВЕТ
17
Файловая структура сайта
Программа GoLive организует папки таким образом, что каждый объект можно отследить с помощью встроенных инструментов управления сайтом. Поговорим о том, как называется каждая папка, и для чего она используется. В данном примере веб-сайт, который мы создаем, называется «Журналом». Все документы сайта (загружаемые на сервер и сохраняющиеся на локальном компьютере) хранятся в папке Magazine. В этой папке вы найдете: • корневую папку (Web-content). Эта папка содержит HTMLстраницы, изображения, файлы мультимедиа и другие файлы сайта. Эти файлы загружаются на сервер; • папку данных (Web-data). Эта папка содержит такие элементы сайта, как компоненты, шаблоны, интеллектуальные объекты Smart, данные, импортированные из программы InDesign, Site Trash (Корзина сайта) и так далее. Эти файлы не загружаются на сервер. Они используются локально на вашем компьютере; • папку настроек (Web-settings). В этой папке программа GoLive сохраняет файлы настроек. Вам не понадобится их открывать. При необходимости программа GoLive будет их использовать автоматически; • файл сайта (magazine.site). Это основнойфайл сайта. Он содержит параметры, которые отслеживают все прочие папки. Файл сайта управляет вашими ссылками, URLадресами, настройками протокола FTP, цветами сайта. Также он находит ошибки и делает многое другое. Когда вы откроете этот файл в проводнике, он преобразуется в окно Site в рабочем пространстве GoLive . Дважды щелкните по файлу magazine.site, чтобы открыть окно Site. Содержимое корневой папки отобразится в левом окне под разделом Files (Файлы). Содержимое папки данных отобразится в правом окне (рис. 17.1).
Когда вы открываете сайт, создается резервная копия файла сайта. Когда вы закрываете сайт, резервная копия автоматически сохраняется. Мы рекомендуем при возможности всегда открывать файл сайта из оригинала. Если оригинал будет поврежден, вы сможете загрузить резервную копию.
На левой панели отображено содержимое папки Webcontent. Эти объекты загружаются на вебсервер Окно Site
На правой панели отображено содержимое папки Web-data. Эти объекты не загружаются на вебсервер
Рис. 17.1. Папка magazine содержит корневую папку, папку данных и папку настроек, а также файл сайта. Когда вы откроете этот файл, на экране появятся два окна, которые содержат информацию из корневой папки (слева) и папки данных (справа)
ГЛАВА 2
02_GoLive_T&T_(017-038)_rus.indd 24
Работа с сайтами
21.12.2005 1:00:41
25 СОВЕТ
18
Добавление файлов на сайт
Мы начали с создания нового сайта в GoLive. Скоро вы обнаружите, что вам необходимо добавить другие файлы (изображения, документы PDF) на ваш сайт. Программа GoLive предлагает несколько способов добавления файлов. Выберите способ, который вы считаете оптимальным.
При помощи мыши Ленивые люди (такие как мы) предпочитают использовать мышь. Выделите файлы в оперативной системе (Finder в Mac OS или Проводник в Windows) и переместите их на вкладку Files в окне Site (рис. 18.1). Если вы увидите диалоговое окно с запросом подтверждения, нажмите кнопку OK. Обратите внимание: при перемещении файлы копируются, а не перемещаются на сайт; это значит, что у вас появятся две копии файлов.
Сохранить и обновить режим просмотра Знаете ли вы, что в программе GoLive можно сохранить файлы в корневой папке, и они автоматически появятся в режиме просмотра Site View? Например, создайте галерею файлов в Photoshop и сохраните результаты в корневой папке сайта. Когда вы переключитесь в программу GoLive и обновите окно Site, новые файлы появятся на вкладке Files.
Рис. 18.1. Переместите файлы с помощью мыши, чтобы добавить их на сайт
Импорт файлов Если вы предпочитаете работать с меню, щелкните по вкладке Files в окне Site и выполните команду File Import Files to Site (Файл Импортировать Файлы на сайт). Выделите нужные файлы (чтобы выделить несколько файлов, удерживайте нажатой клавишу Shift) и нажмите кнопку OK. Выделенные файлы будут скопированы на сайт; оригинальные файлы останутся неизменными.
СОВЕТ 18: Добавление файлов на сайт
02_GoLive_T&T_(017-038)_rus.indd 25
21.12.2005 1:00:41
26 СОВЕТ
19 Навигация в окне Site Если вы открыли вложенную папку на вашем сайте и хотите вернуться на верхний уровень, щелкните по кнопке @pict в верхнем левом углу.
Перемещение, переименование и удаление файлов
Если вы переместите файл в другую папку на вашем жестком диске вне программы GoLive, вы получите разорванные ссылки, отсутствующие изображения и проблемы. Для управления файлами сайта используйте вкладку Files в окне Site, и программа GoLive выполнит большую часть работы. Пока вы управляете файлами из окна Site, программа GoLive будет обновлять все гиперссылки и ссылки в HTML, CSS, JavaScript Actions, PDF, QuickTime и SWF. Это правило работает даже с файлами и ссылками из других программ!
Перемещение Чтобы переместить файл, с помощью мыши переместите его в нужную папку. Чтобы переместить файл на один уровень вверх по файловой структуре, поместите его на другой файл, как показано на рис. 19.1.
Рис. 19.1. Чтобы переместить файл на другой уровень, поместите его на файл, находящийся на этом уровне
Также вы можете использовать команды Edit Copy (Правка Копировать) и Edit Paste (Правка Вставить), чтобы копировать и вставлять файлы из одной папки в другую.
Переименование Чтобы переименовать файл на вкладке Files в окне Site, щелкните по имени файла, подождите и щелкните повторно, чтобы выделить имя файла (но не его расширение). Введите новое имя файла и нажмите клавишу Return или Enter. Обратите внимание: вы можете переименовать файлы и папки в поле Name (Имя) окна Inspector (Инспектор).
ГЛАВА 2
02_GoLive_T&T_(017-038)_rus.indd 26
Работа с сайтами
21.12.2005 1:00:41
27
Перемещая или переименовывая файл или папку, которая содержит ссылку на другой файл сайта, вы увидите окно с запросом подтверждения (рис. 19.2). Когда вы будете готовы, нажмите кнопку OK; программа GoLive автоматически обновит весь сайт.
Ошибка? Приходилось ли вам перемещать файл не в ту папку? Неправильно вводить имя файла? Случайно удалять файл? Если да, вы будете довольны, узнав, что окно Site программы GoLive предлагает 20 уровней команды Undo. Нажмите клавиши Command+Z (Mac) или Ctrl+Z (Windows), Йпрограмма GoLive отменит последнее действие, а также все связанные с ним автоматические операции.
Рис. 19.2. Когда вы перемещаете или переименовываете файл или папку, программа GoLive проверяет все ссылки
Удаление Чтобы удалить файл или папку на вкладке Files, выделите ее и щелкните по значку в виде корзины на панели инструментов (рис. 19.3). Также можно удалить выделенные файлы с помощью клавиш Command+Delete (Mac) или Delete (Windows). При удалении файлов вы увидите диалоговое окно с запросом подтверждения. Даже после удаления файлов вы сможете восстановить их с помощью вкладки Extras (Дополнительно) в окне Site. Рис. 19.3. Чтобы удалить выделенные файлы, щелкните по значку в виде корзины на панели инструментов
СОВЕТ 19: Перемещение, переименование и удаление файлов
02_GoLive_T&T_(017-038)_rus.indd 27
21.12.2005 1:00:41
28 СОВЕТ
20 Режим Large Icons Если вы не помните, для чего используются папки на вкладке Extras (Дополнительно) в окне Site, измените режим просмотра на Large Icons на вкладке Extras. Значки упростят вашу работу с папками.
Изменение режимов просмотра файлов
Режим просмотра по умолчанию для окна Site отображает файлы в виде простого списка – в Windows этот режим просмотра называется Details (Таблица). Программа GoLive CS2 включает три дополнительных режима просмотра: Large Icons (Крупные значки), Thumbnails (Эскизы страницы) и Tiles (Плитка). Чтобы получить доступ к этим режимам просмотра, выполните команду Site View (Сайт Вид), либо Ctrl+щелчок (Mac) или щелчок правой кнопкой мыши (Windows) на вкладке Files или Extras в окне Site (рис. 20.1). Режим просмотра List/Details (Список/Таблица)
Режим просмотра Thumbnails (Эскизы страниц)
Режим просмотра Icons (Значки)
Режим просмотра Tiles (Плитка)
Рис. 20.1. Выберите один из четырех доступных режимов просмотра для окна Site
Эти режимы просмотра позволяют программе GoLive функционировать аналогично файловому браузеру в Adobe Bridge; кроме того, они дают возможность просмотреть метаданные о файлах. Удержите курсор мыши на файле, и вы увидите экранную подсказку с информацией, включающей имя файла, его размер, дату изменения и статус.
ГЛАВА 2
02_GoLive_T&T_(017-038)_rus.indd 28
Работа с сайтами
21.12.2005 1:00:42
29 СОВЕТ
21
Вкладки в окне Site
Перед тем как углубиться в изучение программы GoLive, мы коротко расскажем о различных вкладках в окне Site. Мы будем рассматривать вкладки по порядку, слева направо (рис. 21.1).
Рис. 21.1. Слева в окне Site расположены вкладки, которые предназначены для решения большинства стандартных задач
• Files (Файлы). Вы можете воспринимать эту вкладку как корневую папку вашего веб-сайта. Все файлы, которые загружаются на веб-сервер, хранятся здесь (см. Советы 17–20); • External (Внешние ссылки). Здесь хранятся все адреса электронной почты и адреса веб-сайтов, ссылки на которые вы будете использовать (см. Совет 26); • Colors (Цвета). Чтобы сохранить постоянность цветовой палитры для всего сайта, вы можете поместить в эту папку образцы цветов (см. Совет 71); • Font Sets (Наборы шрифтов). Используете ли вы тэги шрифтов или CSS (см. ниже), в этой папке вы храните группы основных шрифтов; • CSS (Cascading Style Sheets – Каскадные таблицы стилей). Эта вкладка является нововведением в GoLive CS2. Она помогает отслеживать все файлы CSS, классы объектов и ID (Идентификаторы объектов) (см. Совет 117); • Diagrams (Диаграммы). GoLive включает ряд встроенных инструментов для работы со структурой сайта. В этой папке хранятся диаграммы (см. Совет 200);
СОВЕТ 21: Вкладки в окне Site
02_GoLive_T&T_(017-038)_rus.indd 29
21.12.2005 1:00:42
30 Упрощаем окно Site Щелкните по значку Toggle Split View (Переключить режим просмотра) в нижней части окна, чтобы скрыть или отобразить вкладки в правой части окна Site. Также для вызова данной функции вы можете использовать «плавающее» меню в верхнем правом углу окна.
Правая часть окна Site используется для решения фоновых задач, например, для хранения шаблонов, отслеживания ошибок и сохранения файлов настроек (рис. 21.2). Разумеется, вы будете работать с данными вкладками, но не очень часто.
Рис. 21.2. На вкладках в правой части окна Site вы загружаете файлы на сервер, исправляете ошибки и сохраняете объекты библиотек
• Publish Server (Разместить на сервере). Используйте эту вкладку для загрузки файлов на ваш сервер из окна Site (см. Советы 212–224); • Collections (Коллекции). Здесь сохраняются ссылки на часто используемые файлы (см. Совет 210); • Errors (Ошибки). Функция проверки ошибок в режиме реального времени программы GoLive автоматически помечает все разорванные ссылки, отсутствующие изображения, а также файлы с потерянными ссылками (см. Совет 129).
ГЛАВА 2
02_GoLive_T&T_(017-038)_rus.indd 30
Работа с сайтами
21.12.2005 1:00:42
31 СОВЕТ
22
Управление вкладками в окне Site
Теперь вы знаете, какое количество вкладок содержится в окне Site. Вы можете настраивать их любым способом. Например, изменять порядок вкладок и даже перемещать их слева направо и наоборот. Если вы хотите поместить вкладку Extras (Дополнительно) рядом с вкладкой Files (Файлы), просто переместите вкладку в левую часть окна и поместите ее между вкладками
Обнуление настроек для окна Site Чтобы восстановить настройки по умолчанию для вкладок в окне Site, выберите опцию Default Configuration (Конфигурация по умолчанию) в нижней части «плавающего» меню окна Site.
Рис. 22.1. Вы можете настроить окно Site в соответствии с вашими предпочтениями
Files и External (рис. 22.1). Если вы работаете с несколькими мониторами, или с большим монитором LCD, вы можете извлечь несколько вкладок из окна Site и видеть их постоянно. Переместите вкладку из окна Site в отдельное окно. Если вы не работаете с какой-либо вкладкой, можно ее скрыть. Если вы скрыли вкладку, а потом вам понадобилось ее отобразить, выберите имя вкладки в «плавающем» меню, расположенном в верхнем правом углу окна Site (рис. 22.2). Также вы можете использовать данное меню, чтобы открывать режимы Navigation (Навигация) и Links (Ссылки), которые применяются для работы со структурой сайта и отслеживания ссылок.
Рис. 22.2. Чтобы открыть скрытые вкладки, воспользуйтесь «плавающим» меню
СОВЕТ 22: Управление вкладками в окне Site
02_GoLive_T&T_(017-038)_rus.indd 31
21.12.2005 1:00:42
32 СОВЕТ
23 Открываем файлы с помощью комбинаций клавиш Чтобы открыть файл из окна Site в среде Mac с клавиатуры, нажмите клавиши Command+. При работе в среде Windows выделите файл и нажмите клавишу Enter.
Выбор нескольких файлов
Команда разработчиков GoLive упростила вам жизнь, создав для окна Site интерфейс, который выглядит точно так же, как ваша операционная система. Несмотря на то, что функции программы идентичны в версиях для Mac и Windows, программа GoLive управляется в этих системах по-разному. Например, чтобы выбрать несколько соседних файлов в окне Site, выделите первый файл, нажмите и удерживайте клавишу Shift, а затем щелкните по последнему файлу в последовательности. Именно так привыкли работать большинство пользователей Mac, причем данная функция поддерживается и в Finder Mac OS X (рис. 23.1).
Рис. 23.1. Чтобы выделить несколько удаленных файлов, выполните Command+щелчок (Mac) или Ctrl+щелчок (Windows). Если вы выполните Shift+щелчок, будут выбраны все файлы диапазона
Чтобы выбрать несколько удаленных файлов в окне Site, выполните Command+щелчок (Mac) или Ctrl+щелчок (Windows) на файлах.
ГЛАВА 2
02_GoLive_T&T_(017-038)_rus.indd 32
Работа с сайтами
21.12.2005 1:00:42
33 СОВЕТ
24
Просмотр файлов в окне Inspector
Вы можете просматривать файлы в окне Site, но намного удобнее выполнять просмотр с помощью вкладки Content (Содержимое) в палитре Inspector. Вы можете просматривать файлы практически в любом формате, включая GIF, JPEG, HTML, QuickTime, Photoshop, Illustrator и PDF. Если вы работаете с большим изображением (например, как показано на рис. 24.1), вы сможете увидеть лишь небольшую часть файла. Обратите внимание на числа в нижнем левом углу палитры Inspector; эти числа соответствуют размеру выбранного файла.
Рис. 24.1. Вы можете просматривать веб-страницы и графические объекты на вкладке Content в палитре Inspector
Значок масштабирования в виде лупы в левом нижнем углу палитры Inspector позволяет увидеть сразу все изображение. Щелкните по этой иконке, и программа GoLive изменит размеры изображения (но не размеры окна просмотра) и поместит его в палитру Inspector (рис. 24.2).
Рис. 24.2. Опция масштабирования позволяет увидеть все изображение сразу
СОВЕТ 24: Просмотр файлов в окне Inspector
02_GoLive_T&T_(017-038)_rus.indd 33
21.12.2005 1:00:42
34 Когда вы найдете нужный файл, переместите его из окна Inspector на вашу веб-страницу.
ГЛАВА 2
02_GoLive_T&T_(017-038)_rus.indd 34
Работа с сайтами
21.12.2005 1:00:42
35 СОВЕТ
25
Расчет количества ссылок на файл
Пытались ли вы сосчитать, сколько ссылок на страницу, рисунок или PDF-файл содержит ваш сайт? Посмотрев на столбец Used (Используется) на вкладке Files в окне Site, вы можете увидеть галочку (это значит, что на сайте есть ссылки на файл). Если необходима более подробная информация, разверните столбец Used: переместите разделители заголовков столбцов с помощью мыши, и вы увидите, что программа GoLive отслеживает количество ссылок на файл на сайте (рис. 25.1). Это еще одна из удобных функций управления сайтом в GoLive.
Настройка столбцов Если вы хотите изменить порядок столбцов (Status, Used, Kind и так далее) на вкладке Files в окне Site, переместите заголовки столбцов (в Mac выполните Command+перемещение). Чтобы отключить столбец, выполните Ctrl+щелчок (Mac) или щелчок правой кнопкой мыши (Windows) и уберите флажок из соответствующего поля.
Рис. 25.1. Если необходима более подробная информация, разверните столбец Used в окне Site
Попробуйте также развернуть столбец Status (Статус) на вкладке Files. Вы увидите информацию обо всех значках состояния.
СОВЕТ 25: Расчет количества ссылок на файл
02_GoLive_T&T_(017-038)_rus.indd 35
21.12.2005 1:00:42
36 СОВЕТ
26 Проверка внешних ссылок Вместо того чтобы проверять все внешние ссылки вручную, вы можете выделить вкладку External и выполнить команду Site Check External Links (Проверить внешние ссылки). Если в столбце Status вы видите галочку , это значит, что ссылка работает. Если вы увидите символ в виде красного жука, это значит, что следует проверить адрес.
Импорт избранных адресов в качестве внешних ссылок Если в программе Internet Explorer у вас есть избранные адреса, которые вы хотите использовать на сайте в качестве ссылок, выполните команду File Import Favorites as Site Externals (Избранные адреса как внешние ссылки). Если вы работаете с другим браузером, например, Safari, Firefox или Opera, вы можете перемещать URL-адреса из адресной строки или списка закладок напрямую на вкладку External в программе GoLive.
ГЛАВА 2
02_GoLive_T&T_(017-038)_rus.indd 36
Управление URL-адресами и адресами электронной почты
Программа GoLive упрощает управление файлами на веб-сайте, а также позволяет управлять внешними ссылками, например, URL-адресами и адресами электронной почты. Чтобы добавить на сайт внешнюю ссылку, активируйте вкладку External (Внешние ссылки). Затем щелкните по значку Create New Address (Создать новый адрес) или Create New URL (Создать новый URL-адрес) на панели инструментов, либо переместите объекты Address или URL из раздела Site палитры Objects. Настройте внешнюю ссылку в палитре Inspector, как показано на рис. 26.1.
Рис. 26.1. Отредактируйте внешние ссылки в окне Inspector
Чтобы добавить внешнюю ссылку на страницу в качестве гиперссылки, переместите ее из окна Site на выделенное изображение или текст на веб-странице в режиме Layout Editor (Макетирование) (за дополнительной информацией о создании ссылок обратитесь к Совету 42). Если вы работаете с уже существующим сайтом в программе GoLive и хотите просмотреть список адресов электронной почты и URL-адресов, гиперссылки на которые содержит сайт, выполните команду Site Update Add Used External Links (Сайт Обновить Добавить используемые Внешние ссылки). Все найденные ссылки будут добавлены на вкладку External в окне Site, где вы сможете организовать и обновить их. Чтобы обновить адрес электронной почты на всех страницах сайта, выделите его на вкладке External и внесите изменения в палитре Inspector. Теперь он будет автоматически обновлен на всем сайте.
Работа с сайтами
21.12.2005 1:00:43
37 СОВЕТ
27
Добавление метаданных файлов с помощью XMP
Метаданные – это данные, которые описывают характеристики или содержимое файлов разных форматов для последующего использования этой информации различными приложениями. Метаданные делают изображения более простыми в использовании, так как облегчают их поиск, особенно при работе с большими проектами. Преимущества использования платформы XMP Adobe в том, что она основана на языке XML и представляет собой открытый и задокументированный стандарт, который можно применять в любой программе. Многие файловые форматы, включая JPEG, GIF, Photoshop, Illustrator, PDF, EPS и TIFF, поддерживают метаданные XMP. Чтобы добавить или отредактировать метаданные в файле, выделите его в окне Site и выполните команду File File Info (Информация о файле). Отредактируйте нужные поля и нажмите кнопку OK (рис. 27.1). Это очень просто, и теперь доступ к этим полям открыт для Adobe Bridge (см. Совет 225), Adobe Version Cue (см. главу 12), а также некоторых других систем управления.
Узнайте больше об XMP Чтобы узнать больше о технологии XMP, посетите сайт по адресу: http://www.adobe.com/ xmp.
Рис. 27.1. В одном диалоговом окне вы можете отредактировать метаданные для одного или нескольких файлов
СОВЕТ 27: Добавление метаданных файлов с помощью XMP
02_GoLive_T&T_(017-038)_rus.indd 37
21.12.2005 1:00:43
38 СОВЕТ
28 Куда пропали все мои файлы? Если при взгляде на вкладку Files в окне Site вы обнаружили, что все ваши файлы пропали, скорее всего, причиной этого является функция Quicksearch. Если вы не видите всех файлов, щелкните по значку с символом X, чтобы очистить поле Quicksearch. При этом будет восстановлен обычный режим просмотра файлов.
Использование функции Quicksearch для поиска файлов
Если вы работаете с веб-сайтом, содержащим большое количество файлов, найти определенный файл бывает трудно даже в том случае, если вы знаете его имя. Новое поле Quicksearch (Быстрый поиск) на вкладке Files в окне Site позволяет быстро найти нужный файл. Введите критерий поиска в поле Quicksearch, расположенном в верхнем правом углу вкладки Files, и вы увидите список файлов, отфильтрованный в соответствии с данным критерием (см. рис. 28.1).
Рис. 28.1. Используйте функцию Quicksearch для быстрого поиска файлов на вкладках Files и Extras в окне Site
Опции интуитивно понятны. Обратите внимание: если вы щелкните по значку в виде лупы, откроется список из четырех типов поиска: Contains (Содержит), Is (Является), Begins With (Начинается с) и End With (Заканчивается на). Эти опции позволяют сузить диапазон поиска. Чтобы отредактировать файл, который вы нашли с помощью функции Quicksearch, дважды щелкните по его значку в отфильтрованном списке результатов поиска. Чтобы вернуться в обычный режим просмотра файлов, щелкните по значку с символом X рядом с полем Quicksearch.
ГЛАВА 2
02_GoLive_T&T_(017-038)_rus.indd 38
Работа с сайтами
21.12.2005 1:00:43
39
ГЛАВА 3.
Работа со страницами Вспомните время, когда сеть Internet только начинала свое развитие, и вам приходилось писать большую часть кодировки вручную. Тогда двумя крупнейшими конкурентами на рынке веб-дизайна были программы SimpleText и Notepad. К счастью, сейчас доступна такая программа, как GoLive, которая позволяет создавать веб-сайты в простом и удобном интерактивном режиме. Конечно, вы можете писать кодировку и в GoLive, но намного проще работать в режиме Layout Editor (Макетирование) и позволить программе составить кодировку за вас. Программа GoLive предлагает шесть различных способов редактирования и просмотра веб-страниц, однако большинство пользователей предпочитают именно этот режим. Его использование позволяет создавать веб-сайты, в основном используя исключительно мышь. Скорее всего, вы тоже будете проводить большую часть своего рабочего времени в режиме Layout Editor. Поэтому мы решили сделать эту главу самой большой в книге. Сначала мы расскажем о некоторых базовых инструментах, таких, как масштабирование, панорамирование, руководства и линейки. Также мы поговорим о методиках построения макета сайта, которые включают сетку, таблицы и слои CSS. В конце главы мы опишем использование цвета в GoLive, а также обмен образцами цвета и настройками между различными приложениями Creative Suite.
03_GoLive_T&T_(039-100)_rus.indd 39
17.01.2006 5:53:30
40 СОВЕТ
29 Переключение в режим по умолчанию По умолчанию документы открываются в режиме Layout Editor; при желании вы можете изменить настройку режима по умолчанию. Выберите нужный режим в ниспадающем меню Default Mode (Режим по умолчанию) в разделе General (Общие) параметров программы.
Шесть режимов документа
Если вы откроете веб-страницу в программе GoLive, то увидите в верхней части окна документа шесть вкладок. Каждая вкладка используется для отдельного режима редактирования или просмотра страницы. Чтобы переключиться между режимами, щелкните по вкладкам в документе. Рассмотрим режимы по порядку, слева направо. Режим редактирования исходного кода Режим редактирования структуры Предварительный Предварительный просмотр в формате просмотр PDF
Режим редактирования фреймов Режим макетирования
Рис. 29.1. Вы можете редактировать и просматривать веб-страницы в программе GoLive шестью различными способами
• режим Layout Editor (Макетирование). При работе в программе GoLive пользователи проводят большую часть времени в этом режиме. Если вы добавляете или редактируете объекты в этом режиме, программа GoLive создаст исходную кодировку автоматически (см. Советы 36–60); • режим Frame Editor (Редактор фреймов). HTML-фреймы сейчас далеко не так популярны, как раньше; если вам необходимо использовать HTML-кодировку, вы будете работать в данном режиме (см. Совет 75); • режим Source Code Editor (Редактор исходного кода). Программа GoLive включает очень мощный редактор исходного кода, который включает большое количество полезных функций (см. Советы 77–82); • режим Outline Editor (Редактор структуры). Этот режим предлагает уникальный способ для просмотра и редактирования структуры страницы (см. Советы 85–91); • режим Layout Preview (Просмотр макета). Если вы желаете увидеть, как будет выглядеть веб-страница в браузере, переключитесь в этот режим. В качестве движка визуализации он использует браузер Opera (см. Совет 92); • режим PDF Preview (Просмотр в формате PDF). Программа GoLive включает функцию конвертирования вебстраницы в формат Adobe PDF (см. Советы 95–107).
ГЛАВА 1
03_GoLive_T&T_(039-100)_rus.indd 40
Начало работы
17.01.2006 5:53:38
41 СОВЕТ
30
Использование значков в окне документа
В верхней части окна каждой веб-страницы GoLive находятся значки документа. Теперь верхний раздел веб-страницы (см. Совет 36) четко обозначен в левой части документа (рис. 30.1). Чтобы открыть подраздел относящийся к заголовку кода HTML , щелкните по значку Head (Заголовок кода), который имеет вид треугольника. Редактор шкалы времениDHTML Параметры страницы Редактор Заголовок страницы Раздел заголовка
JavaScript Редактор CSS
Изменение заголовков страниц Попробуйте выполнить в сети Internet поиск таких ключевых слов, как «Добро пожаловать в Adobe GoLive» или «Страница без заголовка», и вы найдете сотни тысяч страниц, разработчики которых даже не подумали о том, чтобы дать им более удачный заголовок. Постарайтесь, чтобы ваши страницы не попали в эти списки.
Рис. 30.1. Значки в верхней части окна документа позволяют настроить страницу и переключать различные режимы документа
Далее находится поле Page Title (Заголовок страницы), которое представляет собой отдельное текстовое поле. Если пользователи заходят на ваш сайт, заголовок страницы отображается над каждым окном документа. Также заголовок страницы используется при добавлении страницы в список закладок или избранных адресов, поэтому вы советуем вводить только ясные и понятные заголовки. Значок Page Properties (Параметры страницы) теперь сгруппирована вместе со значками JavaScript Editor (Редактор языка JavaScript), DHTML TimeLine Editor и CSS Editor (Редактор каскадных таблиц стилей) в верхнем правом углу окна документа. Щелкните по значку Page Properties, чтобы изменить в палитре Inspector такие параметры страницы, как заголовок, цвета ссылок, поля и фоновое изображение. Чтобы открыть редактор JavaScript Editor, DHTML TimeLine Editor или CSS Editor для страницы, щелкните по соответствующему значку в верхнем правом углу окна документа. Если вы щелкните по значку редактора CSS Editor и удержите кнопку мыши, откроется список CSS-документов сайта для выбора. Если вы будете использовать команды меню или комбинации клавиш, вы найдете их в меню Special (Дополнительно).
СОВЕТ 30: Использование значков в окне документа
03_GoLive_T&T_(039-100)_rus.indd 41
17.01.2006 5:53:39
42 СОВЕТ
31
Настройка строки состояния в документе
Строка состояния в нижней части документа в режиме Layout Editor (Макетирование) предоставляет удобный доступ к некоторым функциям (рис. 31.1).
Переключение в режим разрывов Просмотреть конфигурацию, строк размеры страницы Дерево структуры и статистику документа Кнопка управления масштабированием Показать/скрыть исходный код
Рис. 31.1. Строка состояния предоставляет удобный доступ к некоторым функциям
Вот список этих опций (слева направо): • Show/hide split source (Скрыть/отобразить исходный код). Активирует режим просмотра Split Source (Отобразить исходный код). Данная функция также доступна в меню View (Вид) (см. Совет 35); • Zoom Out (Уменьшить масштаб). Уменьшает масштаб текущего макета страницы в соответствии с настройками (см. Совет 32); • Zoom Value (Масштаб). Выберите масштаб в ниспадающем меню (см. Совет 32); • Zoom In (Увеличить масштаб). Увеличивает масштаб текущего макета страницы в соответствии с настройками (см. Совет 32);
ГЛАВА 1
03_GoLive_T&T_(039-100)_rus.indd 42
Начало работы
17.01.2006 5:53:39
43
• View Configuration/Page Dimensions/Document Statistics (Просмотреть конфигурацию/Размеры страницы/Статистика документа). В этой области находятся три опции. Чтобы выбрать одну из них, щелкните по стрелке и выберите ее в меню Show (Отобразить). Опция View Configuration позволяет оптимизировать страницу для сети Internet либо для использования в мобильной связи. Опция Page Dimensions предназначена для создания и выбора настроек параметров окна документа (см. Совет 33). Опция Document Statistics показывает фактический размер, занимаемый страницей на жестком диске в байтах; • Markup Tree (Дерево разметки). Позволяет выполнить перемещение по структуре исходной кодировки в редакторе Layout Editor (см. Совет 34); • Switch line break mode (Переключиться в режим разрыва строк). Изменяет разрывы строк в текущей странице между форматами Mac, UNIX и Windows. Эта настройка также доступна в меню File Line Breaks (Разрывы строк). Вы можете использовать отдельные опции очень часто, поэтому программа GoLive позволяет настроить строку состояния. Вы можете активировать все опции, а также некоторые из них, связанные с форматом PDF, в «ниспадающем» меню документа (рис. 31.2).
Рис. 31.2. Отключите опции строки состояния, с которыми вы не работаете
СОВЕТ 31: Настройка строки состояния в документе
03_GoLive_T&T_(039-100)_rus.indd 43
17.01.2006 5:53:39
44 СОВЕТ
32 Инструмент Hand Теперь программа GoLive CS2 содержит инструмент Hand , который может быть очень полезным при настройке масштаба страницы. Чтобы его использовать, щелкните по соответствующему значку на панели Tools (Инструменты) или нажмите клавишу H. После активации инструмента вы сможете с его помощью перемещать содержимое окна вверх, вниз, вправо или влево, как и при работе в Photoshop, Illustrator, InDesign или Acrobat. Помните, если все содержимое страницы попадет в видимую часть окна, панорамирование выполняться не будет. Используйте эту функцию только в том случае, если содержимое выходит за границы окна документа, либо если вы увеличили масштаб страницы.
ГЛАВА 1
03_GoLive_T&T_(039-100)_rus.indd 44
Увеличение масштаба макета
Программа GoLive CS2 имеет мощные инструменты управления масштабированием в редакторе Layout Editor. Увеличение масштаба может помочь при выборе или выравнивании небольших объектов, а уменьшение масштаба позволяет просмотреть большую страницу. С помощью меню Zoom Value (Масштаб) в нижнем левом углу окна документа можно изменять масштаб от 8.33 до 1600 процентов (рис. 32.1). Масштабирование очень широко используется на протяжении длительного времени, и команда разработчиков GoLive применила функции масштабирования с максимальной эффективностью.
Рис. 32.1. Как и другие приложения Creative Suite, программа GoLive поддерживает функцию масштабирования страниц
Вы можете выбирать заданные настройки в ниспадающем меню, либо нажать кнопку (–) или (+) для уменьшения или увеличения масштаба. Если вы хотите использовать значение, которого нет в списке, выберите опцию Edit (Правка) в нижней части списка и введите значение. Щелкните по значению масштаба в нижней части документа, чтобы переключиться между значением 100 процентов и предыдущей настройкой. Например, если вам необходимо изменить масштаб от 100 до 50 процентов, чтобы увидеть всю страницу, щелкните по нужному значению. Чтобы поместить меню Zoom Value в другую часть окна документа, выберите в ниспадающем меню пункт Position Right (Переместить вправо).
Начало работы
17.01.2006 5:53:40
45 СОВЕТ
33
Настройка размеров окна
Вы можете переместить нижний правый угол окна Site или окна документа, чтобы изменить его размер. Также вы можете настроить нужный размер страницы и положение, в котором новые страницы будут открываться в вашем браузере. Выберите опцию Page Dimensions в строке состояния (см. Совет 31), и вы увидите размер страницы в пикселях. При изменении размеров это значение тоже изменится. Щелкните по небольшой стрелке, чтобы открыть ниспадающее меню Window Size (Размер окна), в котором указаны другие размеры страницы (рис. 33.1).
Рис. 33.1. Ниспадающее меню Window Size
Выберите в ниспадающем меню пункт Options (Настройки). В открывшемся диалоговом окне вы сможете отредактировать размер страницы по умолчанию, удалить его или добавить новый (рис. 33.2). Для добавления и удаления новых конфигураций окна используйте кнопки в нижнем правом углу. Чтобы изменить порядок конфигураций в списке, выберите их и щелкните по стрелкам в левом нижнем углу.
Window Size Configuration После настройки размеров окна вы можете использовать полученные значения для всех новых документов. Настройте размеры первого окна нужным образом и выберите в ниспадающем списке Window Size пункт Settings (Параметры). В открывшемся диалоговом окне выберите поля флажка Markup Document Windows (Пометить окна документов) и/или Site Windows (Окна сайтов). При этом будут сохранены размеры документов и их положение на экране. Нажмите кнопку OK. Теперь для всех новых документов или сайтов будут использоваться размеры и положение, которые вы настроили через пункт Settings. Для того чтобы восстановить конфигурацию окна по умолчанию, выберите в ниспадающем меню Window Size пункт Settings и нажмите кнопку Use Default Settings (Использовать настройки по умолчанию).
34 Удаление элементов и содержимого Если вы выполните Ctrl+щелчок (Mac) или щелчок правой кнопкой мыши (Windows) на элементе панели Markup Tree, вы увидите две очень мощные функции: Replace Element by Its Content (Заменить элемент по его содержимому) и Remove Element’s Content (Удалить содержимое элемента). Эти опции очень полезны в случае, если нужно изменить синтаксис HTML, но сохранить саму кодировку. Например, если вы работаете с элементом текста, заключенным в тэг , и хотите удалить тэг, выделите его на панели, а затем выберите в контекстном меню команду Replace Element by Its Content.
ГЛАВА 1
03_GoLive_T&T_(039-100)_rus.indd 46
Навигация с использованием панели Markup Tree
В версии GoLive 6 появилась новая панель – Markup Tree (Дерево разметки). Данная панель располагается в строке состояния, активного документа в режимах Layout Editor (Макетирование), Frame Editor (Редактор фреймов) и Outline Editor (Редактор структуры). Существует множество способов использования этой панели; мы сконцентрируемся на двух особенностях: выбор подчиненных и родительских элементов в рабочей области. Вы можете использовать панель для выбора подчиненных элементов выделенного объекта. Например, выделите таблицу в режиме Layout Editor и щелкните по тэгу таблицы, используя Markup Tree, чтобы выбрать тэг
(тэг строки таблицы). См. рис. 34.1.
Рис. 34.1. С помощью панели Markup Tree можно найти все подчиненные элементы выделенного тэга
Также можно использовать дерево разметки для выбора родительских элементов. Например, чтобы убедиться, что вы выделили всю текстовую гиперссылку, выберите ее текст в режиме Layout Editor и щелкните по тэгу на панели Markup Tree. Панель Markup Tree также доступна в диалоговом окне Visual Tag Editor (Визуальный редактор тэгов) (см. Совет 63).
Начало работы
17.01.2006 5:53:40
47 СОВЕТ
35
Опция Split Source
Программа GoLive включает несколько способов редактирования страниц, которые присутствуют в режимах Layout Editor (Макетирование) и Source Code Editor (Редактор исходного кода). Вы можете работать в тех или иных режимах, но мы советуем комбинировать Layout Editor с включенной опцией Split Source и режим Source Code Editor. Вы можете работать в одном режиме, а результаты будут обновляться в другом. Чтобы активировать опцию просмотра Split Source , щелкните по значку Show/Hide в нижнем левом углу окна документа. Также вы можете выбрать команду View Show Split Source, либо нажать клавиши Command+Y (Mac) или Ctrl+Y (Windows), как показано на рис. 35.1.
Перемещаем окно просмотра Split Source View Если вы хотите переместить окно просмотра Split Source, при щелчке по значку Split Source удерживайте клавишу Option (Mac) или Alt (Windows) нажатой.
Рис. 35.1. Опция просмотра Split Source позволяет одновременно редактировать макет и исходную кодировку
Также вы можете открыть документ в режиме Outline Editor и активировать опцию просмотра Split Source. Кроме того, вы можете начать работу в режиме Layout Editor, а затем открыть палитру Source Code (Исходный код) из меню Window (Окно).
СОВЕТ 35: Опция Split Source
03_GoLive_T&T_(039-100)_rus.indd 47
17.01.2006 5:53:40
48 СОВЕТ
36 Объекты, предназначенные для заголовка, перемещаются в него автоматически Если при работе в программе GoLive вы поместите в тело страницы объекты, предназначенные для заголовка (например, мета-тэги или тэги обновления), они будут автоматически перемещены в заголовок.
Заголовок и тело веб-страницы
Если вы знаете базовые принципы HTML-кодировки, вспомните, что каждая страница разделена на две основные части: Head (Заголовок) и Body (Тело). Заголовок находится в начале страницы; пользователь не может его видеть, если только он не просматривает исходную кодировку. В заголовок вы добавляете такие объекты, как мета тэги, а также JavaScript Actions. Чтобы открыть заголовок, щелкните по символу в виде треугольника в верхнем левом углу окна документа (рис. 36.1). Чтобы поместить в заголовок объекты, например, метатэги, переместите их из палитры Objects с помощью мыши. Заголовок Тело
Рис. 36.1. Добавляйте мета тэги в раздел заголовка
Тело представляет собой основную часть страницы, куда вы добавляете все содержимое, которое будут видеть посетители. Все, что находится под заголовком страницы, относится к телу; здесь располагаются таблицы, слои, текст, изображения и так далее.
ГЛАВА 1
03_GoLive_T&T_(039-100)_rus.indd 48
Начало работы
17.01.2006 5:53:40
49 СОВЕТ
37
Вставка объектов на страницу
В процессе построения сайта в программе GoLive вы добавите в него различные компоненты, такие, как таблицы, слои CSS, поля CSS, изображения и объекты мультимедиа. Вы можете перемещать объекты с помощью мыши, следовательно, вы можете создавать и веб-страницы; все очень просто. Сначала выберите группу объектов (см. Совет 4), затем перетащите ее из палитры Objects (Объекты) на текущую страницу в режиме Layout Editor (Макетирование), либо дважды щелкните по объекту в палитры Objects, и он будет добавлен на страницу в точку, где находится курсор. После добавления объекта на страницу вы сможете изменить его настройки, используя палитру Inspector (Инспектор). Например, если вы выделите изображение в режиме Layout Editor, палитра Inspector позволит настроить такие атрибуты, как ширина, высота и выравнивание. Если вы выделите таблицу, палитра Inspector позволит настроить количество строк и столбцов, а также границы и отступы для таблицы (рис. 37.1).
Какие объекты использовать? В правом нижнем углу палитры Objects находится кнопка Palette Options (Настройки палитры). Нажмите эту кнопку , чтобы открыть список групп объектов и отобразить пункт меню Configure (Сконфигурировать). Опция Configure удаляет из палитры объекты, создающие маркеры, которые не соответствуют настройкам DTD – Document Type Definition (Определение типа документа). Чтобы использовать функцию, выберите опцию Configure, а затем выберите в списке нужный вам тип документа (за дополнительной информацией обратитесь к Совету 65).
Рис. 37.1. Переместите объекты из палитры Objects с помощью мыши. Измените настройки объектов в палитры Inspector
СОВЕТ 37: Вставка объектов на страницу
03_GoLive_T&T_(039-100)_rus.indd 49
17.01.2006 5:53:41
50 СОВЕТ
38 Изучение объектов Не все объекты, которые содержатся в палитре Objects, вы можете добавлять на текущую страницу. Например, объекты из групп Site и Diagram можно использовать только в окнах Site и Diagram. Объекты QuickTime и SMIL функционируют только в редакторах QuickTime Editor и SMIL Editor.
Вставка объектов с помощью команд меню
Чтобы быстро вставить объект на страницу, выполните Ctrl+щелчок (Mac) или щелчок правой кнопкой мыши (Windows) в режиме Layout Editor и выберите объект в меню Insert Object (Вставить объект). Объект будет добавлен в точку текущего положения курсора. Также объект будет автоматически выделен, то есть вы сможете сразу настроить его атрибуты в палитре Inspector (рис. 38.1).
Рис. 38.1. С помощью команд меню вы сможете быстро добавить объект в нужную точку документа
Команда Insert также содержится в меню Special, а это значит, что вы можете использовать для определенных объектов комбинации клавиш (см. Совет 2). После применения команды Insert программа GoLive отобразит в верхней части списка десять объектов, которые вы использовали чаще всего.
ГЛАВА 1
03_GoLive_T&T_(039-100)_rus.indd 50
Начало работы
17.01.2006 5:53:41
СОВЕТ
39
Использование команды Paste Special (Специальная вставка)
Вы можете использовать для веб-страницы содержимое, полученное в виде документа Microsoft Word, по электронной почте или из ряда других программ. В прошлом копирование и вставка текста из этих источников в программу GoLive требовали настроек параметров (если вы не знали скрытую комбинацию клавиш, которая восстанавливала форматирование текста). В GoLive CS2 решить эту задачу проще, так как программа содержит новую команду, Paste Special (Специальная вставка). Чтобы использовать команду Paste Special, вы должны сначала скопировать текст из другого документа. Выберите в программе GoLive CS2 команду Edit Paste Special (Правка Специальная вставка), откроется небольшое диалоговое окно (рис. 39.1).
51
Нет места для разрыва В нижней части диалогового окна Paste Special находится опция, позволяющая автоматически преобразовать несколько разрывов строк в абзацы. Если вам когдалибо приходилось копировать и вставлять текст из электронной почты, вы знаете, как полезна может быть эта простая команда. Она позволяет быстро удалить ненужное форматирование, созданное программами для работы с электронной почтой.
Рис. 39.1. Команда Paste Special предлагает большое количество опций, которые упрощают копирование текста из других источников
В верхней части диалогового окна находятся опции, которые позволяют выбрать, хотите ли вы вставить просто текст, текст с форматированием, HTML, Сleared HTML (Исправленная кодировка HTML) или текст в виде рисунка. Последнее может быть полезно в случае, если вы работаете с текстом, содержащим сложное форматирование, которое вы не можете воспроизвести с помощью CSS. В нижней части диалогового окна Paste Special (Специальная вставка) находятся опции, которые позволяют сэкономить время при вставке текста, скопированного из электронной почты, содержащей ненужные разрывы строк. Выберите одну из трех настроек для работы с разрывами строк и нажмите кнопку OK.
СОВЕТ 39: Использование команды Paste Special
03_GoLive_T&T_(039-100)_rus.indd 51
17.01.2006 5:53:41
52 СОВЕТ
40
Использование мета-тэгов
В этом разделе мы рассмотрим два типа метатэгов: Keywords (Ключевые слова) и Description (Описание). Поисковые системы используют эти два тэга для определения соответствия вашего сайта выбранным критериям поиска. Ключевые слова составляют список, который описывает содержимое страницы или сайта. Например, если сайт посвящен шторам, вы можете добавить такие ключевые слова, как «ткань», «занавески», «шторы» и так далее. Также вы можете добавить ключевые слова, которые указывают, где расположена ваша компания (Принстон, Трентон, Нью-Джерси и так далее) или другую важную информацию. Чтобы создать метатэг ключевого слова, перетащите мышью объект Keywords из группы Head Objects (Объекты заголовка) палитры Objects на вашу страницу. Программа GoLive автоматически открывает заголовок, перемещает в него объект и выделяет его. Чтобы добавить ключевое слово в список, введите его в поле на палитре Inspector и нажмите клавишу Enter/Return. При необходимости повторите ввод данных (рис. 40.1).
Рис. 40.1. Добавляйте, редактируйте или удаляйте ключевые слова с помощью палитры Inspector
ГЛАВА 1
03_GoLive_T&T_(039-100)_rus.indd 52
Начало работы
17.01.2006 5:53:41
53
Метатэг Description предоставляет браузеру текст, который используется при условии, что поиск по ключевым словам был выполнен, и сайт соответствует критерию. Если пользователь выполнил поиск по ключевым словам «занавески, Нью-Джерси», поисковая система возвращает ссылку на сайт и предлагает описание ресурса, используя информацию из тега Description. Если информация отсутствует, система будет использовать текст на странице. Чтобы вставить метатэг Decription, перетащите мышью объект Meta на вашу страницу, дважды щелкните по этому объекту в разделе Head (Заголовок) и выберите в ниспадающем меню палитры Inspector пункт Description (рис. 40.2). В поле Text Input (Ввод текста) введите описание вашего веб-сайта. Если возможно, добавьте в текст описания ключевые слова.
Ключевые слова Если в тексте на вашей странице есть слово, которое вы хотите добавить в список ключевых слов, выделите его, и нажмите клавиши Shift+Command+A (Mac) или Shift+Ctrl+A (Windows).
Рис. 40.2. Выберите в ниспадающем меню пункт Description и введите описание
СОВЕТ 40: Использование мета-тэгов
03_GoLive_T&T_(039-100)_rus.indd 53
17.01.2006 5:53:41
54 СОВЕТ
41 Перемещение линеек Если вы включаете или выключаете линейки в среде Mac, они исчезают со страницы или добавляются на нее в виде озвученной анимации. В среде Windows анимация и звук отсутствуют.
Просмотр линеек страницы
Если вы хотите отобразить линейки на странице в режиме Layout Editor, выполните команду View Show Rulers (Вид Отобразить линейки), как показано на рис. 41.1. Чтобы скрыть линейки, выберите команду повторно. Если вы увеличили масштаб страницы, линейки тоже будут увеличены (см. Совет 32).
Рис. 41.1. Линейки страницы помогают выравнивать объекты на странице
Если вы выделили объект на странице, посмотрите на линейки, вы увидите темную полосу, которая показывает местоположение верхнего левого угла объекта на линейке.
ГЛАВА 1
03_GoLive_T&T_(039-100)_rus.indd 54
Начало работы
17.01.2006 5:53:41
55 СОВЕТ
42
Создание ссылок
Вероятно, самая полезная функция веб-страницы – это гиперссылка (или просто ссылка). Вы можете создавать гиперссылки для текста и изображений; программа GoLive предлагает несколько способов создания гиперссылок. Чтобы преобразовать текст в ссылку, выделите его и выполните одно из следующих действий: • введите URL-адрес в поле Link (Ссылка) палитры Inspector; • воспользуйтесь инструментом Fetch URL (Определить URL-адрес) в палитре Inspector и укажите страницу в списке файлов (рис. 42.1); • воспользуйтесь кнопкой Page Properties (см. Совет 30) на открытой странице. Перетащите мышью эту кнопку в нужную точку другой страницы и вы создадите гиперссылку;
Рис. 42.1. Для создания ссылок используйте инструмент Fetch URL в программе GoLive
СОВЕТ 42: Создание ссылок
03_GoLive_T&T_(039-100)_rus.indd 55
17.01.2006 5:53:42
56 Создание ссылок на окно Site Если вы хотите создать ссылку , но не видите список файлов, потому что текущее окно документа его закрывает, выполните следующие действия: перетащите с помощью мыши инструмент Fetch URL к кнопке Select Window (Выбрать окно) на панели инструментов. Окно Site будет перемещено на передний план, и вы сможете завершить создание ссылки. С помощью данной методики вы также можете выносить на передний план открытые папки в списке файлов или вкладки в окне Site.
• нажмите кнопку Browse (Выбрать) в правой части поля ссылки палитры Inspector и найдите документ. Выделите документ, чтобы создать ссылку; • выберите файл в списке ниспадающего меню в правой части поля ссылки, чтобы выбрать файлы, с которыми вы недавно работали (рис. 42.2);
Рис. 42.2. Вы можете создать ссылку с помощью данного списка
• удерживая нажатой клавишу Command (Mac) или Ctrl (Windows), укажите выделенный текст в файле на вкладке Files окна Site; • с помощью мыши перетащите файл из окна Site над выделенной областью. Вы можете создавать ссылку из изображения с помощью первых трех из вышеперечисленных способов. Перед созданием ссылки щелкните по вкладке Link (Ссылка) в палитре Inspector. Также для создания ссылки на документ вы можете переместить файл из окна Site на открытую страницу. При этом будет автоматически создана ссылка на данную страницу (в качестве текста ссылки будет использовано имя файла). Исключение составляет формат PDF (см. Совет 153).
ГЛАВА 1
03_GoLive_T&T_(039-100)_rus.indd 56
Начало работы
17.01.2006 5:53:42
57 СОВЕТ
43
Автоматическое заполнение ссылок http и mailto
Большинство внешних ссылок указывают на веб-сайты или адреса электронной почты и содержат поля http:// или mailto:. Знаете ли вы, что программа GoLive автоматически добавляет эти поля в текст гиперссылки на палитре Inspector? Например, если вы создадите ссылку и введете текст www.adobe.com на палитре Inspector, программа GoLive завершит адрес в виде http://www. adobe.com при нажатии клавиши Return/Enter (рис. 43.1).
Рис. 43.1. Программа GoLive самостоятельно завершает ссылки http и mailto: на палитре Inspector
Эта функция сэкономит время и позволит избежать ошибок. Если вам необходимо задействовать адрес сервера, который использует другой протокол, например, FTP или HTTPS, придется вводить адрес вручную. Данная функция работает и с адресами электронной почты. Если вы введете в поле ссылки палитры Inspector адрес [email protected] и нажмете клавишу Return/Enter, программа GoLive автоматически завершит ссылку в виде mailto: [email protected].
СОВЕТ 43: Автоматическое заполнение ссылок http и mailto
03_GoLive_T&T_(039-100)_rus.indd 57
17.01.2006 5:53:42
58 СОВЕТ
44 Предупреждаем вас! Функция Link Warnings имеется не только в режиме Layout Editor. Вы можете использовать ее и в режимах Source Editor и Outline Editor. Мы считаем, что проще всего находить ошибки в режиме Outline Editor, потому что цвет выделения сразу виден на странице. Если вам неудобно исправлять ошибки в в этом режиме, выделите тэг ошибки и переключитесь в режим Layout Editor. Неправильная ссылка останется выделенной, и вы сможете ее исправить обычным способом.
Отслеживание утерянных ссылок
Если страница содержит неправильную ссылку, программа GoLive сообщит об этом, отобразив символ в виде красного жука в столбце Status списка палитры Files. Чтобы найти ошибку на странице, используйте значок Link Warnings (Предупреждения об утерянных ссылках) на панели инструментов. Значок на панели инструментов содержит тот же символ «красного жука» (рис. 44.1).
Рис. 44.1. Иконка Link Warnings на панели инструментов
Сначала откройте страницу с ошибкой, а затем щелкните по значку Link Warnings. Ошибка на странице будет выделена красным цветом. Если вы не видите объектов, выделенных красным цветом, посмотрите на заголовок страницы. Ошибка может быть и там. Выделите область ошибки и исправьте ссылку с помощью палитры Inspector (рис. 44.2).
Рис. 44.2. Ошибки выделяются красным цветом в режиме Layout Editor, на палитре Inspector и на дереве разметки под окном документа
ГЛАВА 1
03_GoLive_T&T_(039-100)_rus.indd 58
Начало работы
17.01.2006 5:53:42
СОВЕТ
45
Добавление кодировок документа на страницы с ошибками
Document Encoding (Кодировка документа) – это часть кода HTML, которая сообщает браузеру, какой набор символов следует использовать для отображения веб-страницы. Набор символов представляет собой группу символов, которые применяются в определенном языке (английском, русском и так далее). Если вы откроете страницу, параметр Document Encoding которой был не задан, программа GoLive предложит опции для устранения неполадки. Для привязки к странице кодировки используйте один из следующих способов. Если вы откроете файл, который не содержит кодировку, на экране появится диалоговое окно. Если вы выберите первый переключатель и нажмете кнопку Open, страница будет открыта с использованием кодировки, которая была выбрана в ниспадающем меню; однако при этом кодировка не будет добавлена на страницу. Чтобы добавить кодировку на страницу, нажмите второй переключатель и выберите кодировку в ниспадающем меню (рис. 45.1). Программа GoLive сохранит кодировку, и при следующем открытии страницы вы не увидите диалоговое окно.
59
Где же кодировка для моего языка? Последняя опция в подменю File Document Encoding – это Edit. Данная опция позволяет добавить дополнительные наборы символов: Greek (Греческий), Cyrillic (Кириллица), Korean (Корейский) и другие.
Рис. 45.1. Выберите набор символов в ниспадающем меню и нажмите соответствующий переключатель
Открыв страницу, вы сможете изменить кодировку символов. Для этого выполните команду File Document Encoding (Кодировка документа) и сделайте выбор в списке подменю.
СОВЕТ 45: Добавление кодировок документа на страницы с ошибками
03_GoLive_T&T_(039-100)_rus.indd 59
17.01.2006 5:53:42
60 СОВЕТ
46
Использование полностью измененной сетки макета
Жалели ли вы когда-нибудь о том, что у вас нет функции, которая позволяла бы добавлять текст и изображения на веб-страницу именно там, где вам необходимо? Новая функция Layout Grid (Сетка макета) в программе GoLive поможет решить эту задачу. Новый объект Layout Grid располагается в группе Basic на палитре Objects . Мы считаем этот объект новым, несмотря на то, что предыдущие версии GoLive включали сетку, потому что раньше она применялась только в таблицах. Улучшенная поддержка CSS в GoLive CS2 позволяет полностью использовать возможности объектов Layout Grid. Вместо того чтобы писать тэг таблицы, теперь объекты записывают тэг . Чтобы использовать сетку на странице, переместите ее из палитры Objects с помощью мыши или дважды щелкните по ней, чтобы добавить сетку в точке положения курсора (см. Совет 37). Чтобы изменить размеры сетки, переместите один из трех синих манипуляторов или введите новые значения (в пикселях) в полях Width (Ширина) и Height (Высота) палитры Inspector. Далее поместите другие необходимые вам объекты в сетку и переместите их с помощью мыши или клавиш со стрелками на клавиатуре. Вы можете перемещать изображения и клипы непосредственно на сетку, но текст необходимо помещать в текстовое поле. Если вы переместите текст на сетку, программа GoLive создаст текстовое поле с заданными по умолчанию размерами (32 × 32 пикселя), которое, скорее всего, придется изменить. Вы можете сначала создать текстовое поле, а затем вставить в него текст. Переместите текстовое поле из палитры Objects на сетку и измените его размеры; также вы можете использовать инструмент Grid Text Box (Текстовое поле для сетки) для рисования текстовых полей на сетке (рис. 46.1).
ГЛАВА 1
03_GoLive_T&T_(039-100)_rus.indd 60
Начало работы
17.01.2006 5:53:43
61
Определение местоположения на сетке Щелкните по пересечению двух линий у объекта Layout Grid и посмотрите на экран более внимательно. Вы увидите небольшой мигающий курсор синего цвета, который показывает, что вы создали только цель. Если затем вы дважды щелкните по объекту на палитре Objects, данный объект будет размещен в точке, которую вы указали.
Рис. 46.1. Новый инструмент Grid Text Box в программе GoLive CS2 позволяет рисовать текстовые поля в любом месте на сетке
Чтобы выбрать и переместить все объекты в окне Layout Grid (Сетка макета), переместите по ним курсор мыши или выполните Shift+щелчок. Если хотите, вы можете использовать значки Group (Сгруппировать) и Ungroup (Разгруппировать) на панели инструментов, чтобы сгруппировать или разгруппировать объекты, либо открыть палитру Align (Выравнивание) из меню Window и расположить объекты относительно друг друга любым способом. На палитре Inspector вы найдете и дополнительные опции, включая настройку цвета сетки и фонового изображения.
СОВЕТ 46: Использование полностью измененной сетки макета
03_GoLive_T&T_(039-100)_rus.indd 61
17.01.2006 5:53:43
62 СОВЕТ
47
Конвертирование сетки старого формата в CS
В предыдущих версиях GoLive использовались сетки, которые отображались в браузере в виде таблиц. Если вы поместили в сетку слишком много объектов, в результате создавались весьма сложная таблица и запутанная HTML-кодировка. Обновленный объект Layout Grid в GoLive CS2 основан на CSS и записывает тэги , которые быстро визуализируются современными браузерами. Вы можете конвертировать старые табличные сетки из предыдущих версий GoLive в новые. Откройте в GoLive CS2 документ, который использует устаревшую табличную сетку. В верхнем правом углу сетки находится небольшой значок, который показывает, является ли сетка табличной или основана на CSS . Чтобы переключиться между типами сетки, выполните Ctrl+щелчок (Mac) или щелчок правой кнопкой мыши (Windows) по сетке и выберите команду Convert to Table based Grid (Конвертировать в табличную сетку) или Convert to CSS based Grid (Конвертировать в сетку CSS), как показано на рис. 47.1.
Рис. 47.1. Вы можете конвертировать табличную сетку в сетку Layout Grid
ГЛАВА 1
03_GoLive_T&T_(039-100)_rus.indd 62
Начало работы
17.01.2006 5:53:43
63 СОВЕТ
48
Конвертирование сеток Layout Grid в таблицы
Вы можете конвертировать сетку табличного типа в стандартную HTML-таблицу. Для этого выделите сетку и выберите в меню Special команду Layout Grid to Table (Конвертировать в таблицу). Если вам этого недостаточно, вы можете также конвертировать таблицу в формат Layout Grid. Просто выделите таблицу и нажмите кнопку Convert (Конвертировать) в палитре Inspector рядом с опцией Table to Layout Grid (рис. 48.1). За дополнительной информацией по использованию таблиц обратитесь к Совету 51.
Рис. 48.1. Вы можете конвертировать таблицу в формат Layout Grid с помощью одного щелчка на палитре Inspector
СОВЕТ 48: Конвертирование сеток Layout Grid в таблицы
03_GoLive_T&T_(039-100)_rus.indd 63
17.01.2006 5:53:43
64 СОВЕТ
49
Создание макета с помощью инструмента Layer
Сетки Layout Grid очень удобны для создания веб-страниц, но современный подход заключается в том, чтобы использовать слои. При размещении объектов на странице слои предлагают более высокую гибкость по сравнению с сетками Layout Grid, потому что есть возможность накладывать слои, группировать их, включать, отключать и даже анимировать. Совет В GoLive CyberStudio 3 и Adobe GoLive 4,5 и 6 слои назывались плавающими полями. Это устаревшее название вызывало недовольство многих пользователей, и команда разработчиков GoLive наконецто решила его изменить.
В GoLive CS2 появился новый инструмент Layer (Слой) , который упрощает размещение слоев на странице. Щелкните по инструменту Layer или нажмите клавишу F, чтобы активировать данный инструмент, затем щелкните мышью на странице и нарисуйте слой. Вы можете рисовать слои, которые накладываются друг на друга, прилегают друг к другу или имеют свободное положение на странице (рис. 49.1).
Рис. 49.1. Слои могут быть наложенными, прилегающими или плавающими
После этого воспользуйтесь инструментом Object Selection (Выбор объектов), чтобы переместить слои. Активируйте инструмент Object Selection: щелкните по нему на панели Tools (Инструменты) или нажмите клавишу V, затем щелкните и перемещайте слой по странице. Обратите внимание на то, что слой состоит из двух частей: черного прямоугольника, обозначающего границу слоя, и небольшого желтого маркера. При щелчке по желтому маркеру вкладка Layer (Слой) палитры Inspector окажется в фокусе; при щелчке по черному прямоугольнику сама палитра Inspector окажется в фокусе, а слой будет выделен. Переместив желтый маркер,
ГЛАВА 1
03_GoLive_T&T_(039-100)_rus.indd 64
Начало работы
17.01.2006 5:53:43
65
фактически вы переместите код слоя в исходном коде HTML. Переместив прямоугольник, вы переместите слой на странице. В слой вы можете добавлять различные объекты, например, изображение, таблицу, текст или даже сетку Layout Grid. Мы советуем давать слоям информативные названия. Несмотря на то, что программа GoLive автоматически присваивает каждому слою название, эти названия трудно использовать. Кроме того, понадобится задать для каждого слоя Z-индекс, который показывает порядок его группирования. Для решения этих двух задач воспользуйтесь палитрой Inspector (рис. 49.2).
Настройка формата слоев в редакторе CSS Editor В HTML-кодировке слои записываются в виде тэгов с уникальными ID, поэтому вы можете настраивать их в CSS Editor (Редактор CSS). Используйте CSS для настройки положения или размера, добавления границ или полей в слой и так далее.
Рис. 49.2. На палитре Inspector можно настроить такие атрибуты слоя, как название и Z-индекс
Несмотря на то, что вы можете перемещать слои с помощью мыши, вы также можете использовать поля палитры Inspector. Обратите внимание на поле флажка Visible in the Inspector (Отображается в окне Inspector). Это поле включает или выключает слой в браузере и часто используется вместе со ссылкой или действием для того, чтобы скрывать и отображать слои. Перейдите на вкладку Background (Фон) палитры Inspector, чтобы привязать к слою цвет или фоновое изображение. Вкладка Timeline (Шкала времени) палитры Inspector позволяет быстро создать анимацию. Выделите слой и нажмите кнопку Record (Записать), затем переместите слой по странице. Программа GoLive автоматически настроит маркеры времени. Чтобы настроить анимацию, нажмите кнопку Open Timeline Editor (Открыть редактор Timeline Editor) и продолжите работу в редакторе Timeline Editor.
СОВЕТ 49: Создание макета с помощью инструмента Layer
03_GoLive_T&T_(039-100)_rus.indd 65
17.01.2006 5:53:44
66 Увлекательные слои Вы можете использовать не только инструмент Layer для рисования слоев, но и объект Layer в группе объектов Basic. Переместите слой на страницу или дважды щелкните, чтобы его добавить. Также вы можете добавлять новые слои из палитры Layers, которая открывается из меню Window. Если вы хотите, чтобы два слоя всегда перемещались вместе, поместите желтый маркер одного слоя в другой. С помощью палитры Table & Boxes (Таблица и поля) из меню Window йможете изменять масштаб вложенных слоев.
ГЛАВА 1
03_GoLive_T&T_(039-100)_rus.indd 66
Также для выбора слоя вы можете щелкнуть по его названию в палитре Layers. Палитра Layers содержит кнопки Create New Layer (Создать новый слой) и Delete Selected Layers (Удалить выделенные слои), как показано на рис. 49.3.
Рис. 49.3. На палитре Layers вы можете создавать или удалять слои, вводить их названия или выделять слои
Если вы хотите переместить названия слоев в списке, выберите в меню палитры Layer пункт Hierarchic (По иерархии) и переместите названия слоев с помощью мыши. Режим Hierarchic также предлагает визуальное изображение вложенных слоев. Небольшая иконка в виде глаза слева от слоя на палитре Layer включает или выключает слой во время редактирования, но она не влияет на видимость слоя в браузере. Вам понадобится воспользоваться опцией Visibility (Видимость) палитры Inspector.
Начало работы
17.01.2006 5:53:44
67 СОВЕТ
50
Работа с объектами CSS
В GoLive CS2 появился набор объектов, которые называются перемещаемыми объектами CSS. Эти объекты представляют собой группу встроенных CSS-полей, например, три столбца со «свободным» центром (центром, который масштабируется при изменении масштаба страницы), строками навигации, полями и так далее (рис. 50.1).
Объекты CSS Вы можете не только помещать поля CSS рядом на странице, но и вкладывать их друг в друга. Это значит, что можно быстро создать сложный CSSдизайн.
Рис. 50.1. Новые перемещаемые CSS-объекты упрощают создание CSS-макетов
Данные объекты позволяют быстро создавать сложные CSSмакеты. Просто переместите объект из палитры Objects на страницу. Вы даже можете поместить одно поле в другое. После создания базового макета страницы воспользуйтесь палитрой Inspector, чтобы отредактировать ID тэгов или изменить размер поля (рис. 50.2).
Рис. 50.2. Выберите объект CSS на странице и отредактируйте его атрибуты, например, ID или размеры, в палитре Inspector
СОВЕТ 50: Работа с объектами CSS
03_GoLive_T&T_(039-100)_rus.indd 67
17.01.2006 5:53:44
68 Переход из палитры Inspector
Используйте CSS Editor (Редактор CSS) для изменения стиля поля, например, настройки, границ, фонового цвета или изображения и так далее (рис. 50.3).
В GoLive CS на вкладке Layer палитры Inspector появились две новые кнопки: CSS Editor и Layer Palette. Один щелчок, и вы получаете доступ к инструментам, которые необходимы для работы со слоями.
Рис. 50.3. В CSS Editor можно настроить фоновый цвет или изображение поля
ГЛАВА 1
03_GoLive_T&T_(039-100)_rus.indd 68
Начало работы
17.01.2006 5:53:44
69 СОВЕТ
51
Создание макета с использованием таблиц
Ранее текст на HTML-странице проходил через все окно, а таблицы использовались только для отображения табличных данных в веб-браузере. Разработчики быстро поняли, что они могут создавать более сложные макеты с помощью таблиц. Благодаря последним улучшениям в CSS теперь табличные макеты стали менее распространенными, но время от времени таблицы все же приходится использовать. Программа GoLive очень удобна для работы с таблицами и содержит некоторые уникальные функции, например, палитру Table & Boxes (Таблица и поля). GoLive включает три инструмента для управления таблицами: объект Table (Таблица), вкладку Table в палитре Inspector и палитру Table & Boxes (рис. 51.1).
Рис. 51.1. Для построения таблиц используйте следующие инструменты: объект Table, палитру Table Inspector и палитру Table & Boxes
Объект Table находится в группе Basic палитры Objects. Переместите его на страницу или дважды щелкните, чтобы добавить его. Воспользуйтесь палитрой Inspector, чтобы настроить такие атрибуты объекта, как количество строк и столбцов. При выделении таблицы в этой палитре появляются вкладки Table (Таблица), Row (Строка), Cell (Ячейка) и Text (Текст), которые содержат опции для настройки атрибутов таблицы. Если вы выберите строку в таблице, программа GoLive автоматически развернет инструменты Row. Если вы выберите ячейку, откроются инструменты Cell и так далее.
СОВЕТ 51: Создание макета с использованием таблиц
03_GoLive_T&T_(039-100)_rus.indd 69
17.01.2006 5:53:44
70 Использование команды Command/ Ctrl+перемещение для создания таблиц Если во время перемещения объекта Table на палитре Objects нажать клавишу Command (Mac) или Ctrl (Windows), появится небольшое окно просмотра, которое позволяет создать таблицу с заданным количеством строк и столбцов. Добившись нужного результата, отпустите клавишу , вы сможете завершить перемещение в нужное вам место на странице. В следующий раз при работе с объектом Table он будет содержать то количество строк и столбцов, которое вы выбрали в последний раз.
При настройке размеров таблицы, строки или ячейки вы можете выбрать в ниспадающем меню пункты Pixel (Пиксели), Percent (Проценты) или Auto (Автоматически). Опция Pixel задает размер в пикселях, опции Percent и Auto функционируют несколько иначе. Если вы настроите размер таблицы на 80 процентов, то таблица займет только 80 процентов от всей страницы. Если вы выбрали опцию Auto, то таблица будет изменять размеры в соответствии со своим содержимым. При настройке размера отдельных ячеек можно комбинировать опцию Pixel или Percent в одном столбце с опцией Auto в соседнем столбце, чтобы добиться определенного эффекта. Например, если вы создаете таблицу с двумя столбцами (двумя ячейками), настройте размер первой ячейки на 125 пикселей, а размер второй ячейки – на Auto; это значит, что размер первой ячейки будет постоянным, а размер второй ячейки будет настраиваться. Если вы настроите размер первой ячейки на 25 процентов, а размер второй ячейки – на 75 процентов, два столбца будут пропорционально изменять размер при изменении размеров таблицы. На панели Inspector также настраиваются граница таблицы, заливка ячеек и отступы для ячеек, а также цвет таблицы, строки или отдельной ячейки. Далее мы поговорим об этих настройках (рис. 51.2).
Рис. 51.2. Палитра Table Inspector
• Border (Граница). Определяет размер границы вокруг таблицы; • Cell Pad (Заливка ячейки). Создает заливку в ячейке и применяет ее ко всем ячейкам таблицы; • Cell Space (Отступ ячейки). Создает отступ между ячейками и применяет его ко всем ячейкам таблицы; • Align Left or Right (Выровнять по левому или правому краю). Позволяет другим объектам обтекать таблицу. Опция Align Center (Выровнять по центру) выравнивает таблицу по центру. Опция Default (По умолчанию) выравнивает таблицу по левому краю, но без обтекания;
ГЛАВА 1
03_GoLive_T&T_(039-100)_rus.indd 70
Начало работы
17.01.2006 5:53:44
71 • Caption (Заголовок таблицы). Создает отступ для заголовков таблицы; • BgImage (Фоновое изображение). Позволяет создать фоновое изображение для таблицы. Изображения будут располагаться в ряд; для дополнительной настройки воспользуйтесь функциями CSS; • Tab-Text Import (Импорт текста с разделителями). Переносит текст, имеющий форматирование с помощью разделителей (знак табуляции, точка с запятой, пробел и запятая), в таблицу GoLive, а функция Export (Экспорт) извлекает данные из таблицы GoLive в текстовый формат; • Table to Layout Grid (Таблицу в сетку). Преобразует таблицу в сетку. Совет Вы можете скопировать диапазон ячеек из таблицы Microsoft Excel и вставить его в таблицу GoLive. Программа GoLive автоматически создаст строки и столбцы, которые требуются для данных (см. Совет 53).
Объединение Для объединения ячеек выделите одну ячейку , нажмите и удерживайте клавишу Shift и нажмите клавишу Right Arrow (для объединения с правой ячейкой), либо Down Arrow (для объединения с нижней ячейкой). Будьте внимательны. Несмотря на то, что содержимое первой ячейки остается неизменным, содержимое объединенных ячеек будет удалено. Перед объединением ячеек переместите их содержимое в первую ячейку.
Чтобы добавить строки или столбцы, выполните одно из следующих действий: • выделите ячейку и введите количество строк и столбцов на вкладке Table палитры Inspector; • выделите ячейку и воспользуйтесь кнопками Add Row/ Column (Добавить строку/столбец) или Delete Row/Column (Удалить строку/столбец) на вкладке Cell; • выделите ячейку, выполните команду Special Table и вставьте столбец или строку; • выделите ячейку, выберите в контекстном меню пункт Insert или Remove и вставьте столбец или строку; • поместите курсор в последнюю ячейку таблицы и нажмите клавишу Tab, чтобы создать новую строку ниже; • нажмите клавишу Command (Mac) и переместите нижнюю или правую границу таблицы. В среде Windows эквивалентной команды не существует. Чтобы скомбинировать ячейки (например, конвертировать строку из четырех ячеек в одну ячейку), вы их объединяете. Чтобы объединить ячейки, выделите диапазон, выполните Ctrl+щелчок/ щелчок правой кнопкой мыши и выберите команду Merge Cells (Объединить ячейки) или Special Table Merge Cells. Ячейка таблицы может содержать любые объекты, которые добавляются на страницу, например, текст, изображения или даже другую таблицу (см. Совет 58). Вы можете как импортировать данные в таблицы GoLive, так и экспортировать их из таблиц (см. Совет 53).
СОВЕТ 51: Создание макета с использованием таблиц
03_GoLive_T&T_(039-100)_rus.indd 71
17.01.2006 5:53:45
72 СОВЕТ
52
Выделение таблиц
Управление таблицами в программе GoLive очень эффективно; в этом разделе мы покажем несколько методик, которые существенно упрощают решение стандартных задач. Если вы выделили строку, столбец или ячейку, вокруг выбранной области появится черный контур. • выбор таблиц с помощью курсора. Чтобы выделить всю таблицу, щелкните по ее верхней или левой границе (рис. 52.1);
Рис. 52.1. Чтобы выделить всю таблицу, щелкните по ее верхней или левой границе
• выбор таблиц с помощью дерева маркеров. Если курсор уже находится внутри нужной таблицы, щелкните по тэгу
на дереве разметки под окном документа. Если вы работаете с вложенными таблицами, убедитесь в том, что вы выбрали нужную таблицу; • выбор ячейки таблицы с помощью курсора. Чтобы выделить одну ячейку в таблице, щелкните по нижней или правой границе ячейки (рис. 52.2);
Рис. 52.2. Чтобы выделить одну ячейку в таблице, щелкните по нижней или правой границе ячейки
ГЛАВА 1
03_GoLive_T&T_(039-100)_rus.indd 72
Начало работы
17.01.2006 5:53:45
73
• выбор ячейки таблицы с помощью дерева разметки. Если курсор уже находится внутри нужной ячейки, щелкните по тэгу
на дереве разметки под окном документа; • выбор столбцов таблицы. Чтобы выделить весь столбец, переместите курсор к его верхней границе и щелкните, когда курсор примет форму стрелки, направленной вниз (рис. 52.3). Чтобы выделить несколько соседних столбцов, щелкните по верхней границе столбца и переместите курсор по горизонтали. Чтобы добавить в выделенную область несколько удаленных столбцов, выполните Shift+щелчок на верхних границах этих столбцов. Чтобы удалить столбец из выделенной области, выполните Shift+щелчок на его верхней границе;
Использование палитры Table & Boxes Все методики выбора таблиц функционируют в палитре Table & Boxes так же, как и в режиме Layout Editor. Откройте палитру Table & Boxes в меню Window и измените ее размер, чтобы упростить выбор ячеек.
Рис. 52.3. Выбирать строки и столбцы просто
• выбор строк таблицы. Чтобы выделить всю строку, переместите курсор к ее левой границе и щелкните, когда курсор примет форму стрелки, направленной вправо. Чтобы выделить несколько соседних строк, щелкните по левой границе строки и переместите курсор по вертикали. Чтобы добавить в выделенную область несколько удаленных строк, выполните Shift+щелчок на левых границах этих строк. Чтобы удалить строку из выделенной области, выполните Shift+щелчок на ее левой границе; • выбор нескольких ячеек таблицы. Чтобы выделить диапазон соседних ячеек, щелкните и переместите по ним курсор;
СОВЕТ 52: Выделение таблиц
03_GoLive_T&T_(039-100)_rus.indd 73
17.01.2006 5:53:45
74 • выбор удаленных ячеек таблицы. Чтобы выбрать несколько удаленных ячеек таблицы, сначала выделите одну ячейку, а затем выполните Shift+щелчок на других ячейках (рис. 52.4). Чтобы удалить ячейку из выделенной области, выполните Shift+щелчок на ячейках таблицы;
Рис. 52.4. С помощью клавиши Shift можно добавлять и удалять ячейки из выделенной области
• выбор таблиц и ячеек с применением клавиатуры. Нажмите клавиши Command+Return (Mac) или Ctrl+Enter (Windows), чтобы осуществить перемещение по структуре таблицы. Например, если вы выделите содержимое ячейки таблицы и нажмете эти клавиши, будет выбрана ячейка таблицы. Если вы выделите ячейку таблицы и нажмете эти клавиши, будет выбрана вся таблица. Если вы примените эту комбинацию к вложенной таблице, вы выделите родительскую ячейку таблицы; • выбор содержимого ячейки таблицы. Если вы выделили ячейку таблицы и хотите отредактировать ее содержимое (но не саму ячейку), нажмите клавишу Enter/Return или переключитесь на вкладку Text палитры Inspector.
ГЛАВА 1
03_GoLive_T&T_(039-100)_rus.indd 74
Начало работы
17.01.2006 5:53:45
75 СОВЕТ
53
Импорт данных в таблицы
Вы можете без проблем импортировать в таблицы текст из различных программ, включая Microsoft Excel, Microsoft Word, AppleWorks, Lotus 123 и Lotus Word Pro (рис. 53.1). Выполните следующие действия: 1. Выделите ячейки и выполните команду Edit Copy (Правка Копировать), чтобы скопировать текст из оригинального файла, например, таблицы Microsoft Excel или Microsoft Word. 2. Перейдите в программу GoLive и выполните команду Edit Paste (Правка Копировать), чтобы создать таблицу из данных в буфере обмена. Обратите внимание: программа GoLive автоматически создает нужное количество строк и столбцов. Если необходимо импортировать в таблицу текстовый файл, выполните команду Special Table Import Tab-Delimited Text (Импортировать текст в таблицу) и выберите текстовый файл. Также вы можете экспортировать текст из таблиц HTML в программу GoLive. Выделите таблицу в режиме Layout Editor и выполните команду Special Table Export Tab-Delimited Text (Экспортировать текст, разделенный табуляторами), чтобы сохранить текстовый файл.
Импорт части таблицы Выбранная вами в таблице ячейка определяет левую верхнюю точку для импортируемого текста. Если таблица уже содержит данные, например, заголовки столбцов, вы можете выбрать самую левую ячейку во второй строке, и при вставке текст существующая информация сохранится.
Рис. 53.1. Для импорта и экспорта данных таблицы можно копировать и вставлять их, использовать команды Special Table или кнопки палитры Inspector
СОВЕТ 53: Импорт данных в таблицы
03_GoLive_T&T_(039-100)_rus.indd 75
17.01.2006 5:53:45
76 СОВЕТ
54
Фиксированная ширина таблицы
Веб-разработчики могут свободно экспериментировать с различными настройками макетов таблиц в GoLive. Однако это может привести к тому, что настройки ширины таблиц и ячеек будут нарушены. Например, сумма ширины всех ячеек таблицы перестанет равняться ширине всей таблицы. Программа GoLive сигнализирует о наличии ошибки, отображая символ красного цвета на вкладке Select палитры Table & Boxes (Таблицы и поля). Поместите курсор мыши на красный символ (220p на рис. 54.1), и он примет форму галочки.
Рис. 54.1. Чтобы исправить размеры таблицы, щелкните по красному символу курсором в форме галочки
Щелкните по красному символу в форме галочки курсором, и программа GoLive рассчитает правильные настройки ширины, а затем исправит исходную кодировку таким образом, чтобы таблица оптимально визуализировалась в различных браузерах и на разных платформах (рис. 54.2).
Рис. 54.2. После исправления ширина ячейки в этом примере составляет 244, а не 220 пикселей
ГЛАВА 1
03_GoLive_T&T_(039-100)_rus.indd 76
Начало работы
17.01.2006 5:53:45
77 СОВЕТ
55
Сортировка данных таблицы
Иногда данные, которые вы добавляете в HTML-таблицу, отформатированы идеально, но чаще всего необходимо их отсортировать. Например, вы можете отсортировать таблицу по номеру детали или цене. Сортировка данных в GoLive очень проста. Выделите нужную таблицу (см. Совет 52) и откройте палитру Table & Boxes из меню Window. Нажмите кнопку Sort (Сортировать) в нижнем правом углу палитры, чтобы открыть диалоговое окно Sort Table (Сортировать таблицу), как показано на рис. 55.1.
Сортировка выделенной области Если вы хотите отсортировать только часть таблицы, выделите нужные ячейки перед тем, как открыть диалоговое окно Sort Table.
Рис. 55.1. Диалоговое окно Sort Table предлагает несколько способов сортировки данных
Опции сортировки включают: • Sort by (Сортировать по). Вы можете выбрать строку или столбец для сортировки. Затем вы можете воспользоваться опцией Then by (Затем по), чтобы настроить второй критерий сортировки; • Ascending or Descending (По возрастанию или убыванию). Вы можете выполнять сортировку в алфавитном порядке по возрастанию или убыванию. Если вы хотите, чтобы первой в списке шла запись с самой низкой ценой, выберите опцию Ascending; в противном случае, выберите опцию Descending; • Sort Rows or Columns (Сортировать строки или столбцы). Если вы хотите выполнить сортировку сверху вниз, выберите опцию Rows (Строки). Если вы хотите сортировать слева направо, выберите опцию Columns (Столбцы); • Sort Selection Only (Сортировать только выделенную область). Сортирует только ячейки, которые были выбраны, когда вы открыли диалоговое окно Sort Table (Сортировать таблицу). Прочие ячейки игнорируются; • Sort Without Header (Сортировать без заголовка). Сортирует всю таблицу за исключением первой строки или столбца, который резервируется в качестве заголовка; • Sort Whole Table (Сортировать всю таблицу). Сортирует всю таблицу, включая строку или столбец заголовка, даже если вы выбрали только часть таблицы.
СОВЕТ 55: Сортировка данных таблицы
03_GoLive_T&T_(039-100)_rus.indd 77
17.01.2006 5:53:45
78 СОВЕТ
56
Изменение порядка таблиц
Сортировка данных в таблице в алфавитном или последовательном порядке позволяет сэкономить время; иногда необходимо изменить порядок только в некоторых частях таблицы. Например, вы можете переместить столбец цены вправо или столбец с номером влево. Чтобы переместить столбцы или строки таблицы, выделите их и щелкните по небольшому манипулятору в левом нижнем углу выбранной области. Следите за черными линиями между строками или столбцами; эти линии показывают направление смещения (рис. 56.1). Также вы можете переместить строки и столбцы после их выбора (см. Совет 52). Эта функция работает даже с несколькими ячейками, если они расположены рядом.
Рис. 56.1. Вы можете изменить порядок столбцов и строк в таблице с помощью мыши
Чтобы скопировать выбранную область, переместите ее на свободное место страницы. Эта методика работает на палитре Table & Boxes так же, как и в режиме Layout Editor .
ГЛАВА 1
03_GoLive_T&T_(039-100)_rus.indd 78
Начало работы
17.01.2006 5:53:46
79 СОВЕТ
57
Настройка стиля таблицы
Импорт, сортировка и изменение порядка данных таблицы в GoLive помогает организовать информацию, а настройка стиля строк и столбцов придает данным форму, которая необходима для визуального восприятия. Выделите таблицу, откройте палитру Table & Boxes из меню Window и переключитесь на вкладку Table Style (Стиль палитры) таблицы (рис. 57.1).
Рис. 57.1. Раздел Table Style палитры предоставляет в распоряжение все инструменты, которые необходимы для настройки стиля таблиц Импортировать стиль таблицы
Переименовать стиль таблицы
Экспортировать стиль таблицы
Удалить стиль таблицы Создать новы стиль таблицы
Записать стиль таблицы
Чтобы изменить стиль таблицы, которая была выделена в режиме Layout Editor, выберите стиль таблицы в ниспадающем меню и нажмите кнопку Apply (Применить). Если стиль таблицы выглядит не так, как нужно, нажмите кнопку Clear (Очистить) на палитре и выберите другой стиль. Стили таблиц по умолчанию можно использовать как основу для создания новых стилей. Вы можете применить к таблице форматирование (изменить шрифт, размер шрифта, цвет шрифта, цвет таблицы, цвет строк, цвет ячеек, границы, заливку, отступы и выравнивание) и нажать кнопку Create new table style (Создать новый стиль таблицы) под палитрой. Введите название нового стиля таблицы и нажмите кнопку OK. Теперь вы можете использовать данный стиль для других таблиц и сайтов. Если вы внесли изменения в таблицу и хотите обновить ее стиль, выделите таблицу в редакторе Layout Editor, а стиль таблицы – на палитре Table & Boxes, затем щелкните по иконке Capture (Записать) под палитрой. Существующий стиль таблицы будет обновлен. Чтобы переименовать стиль таблицы, выделите ее в ниспадающем меню, щелкните по иконке Rename (Переименовать) и введите новое название. Если вы хотите удалить стили таблицы, выделите их на палитре Table & Boxes и щелкните по значку Delete .
Обмен стилями таблиц Если вы хотите обменяться стилями таблиц с другими пользователями, выберите в плавающем меню палитры Table & Boxes опцию Export Table Styles (Экспортировать стили таблиц). Стили таблиц сохранятся в файле формата XML, который вы сможете передать другим пользователям. Чтобы импортировать стили таблиц у другого пользователя GoLive, выберите в плавающем меню палитры Table & Boxes опцию Import Table Styles (Импортировать стили таблиц). Эта методика позволяет сохранить единый стиль проекта, над которым работает несколько дизайнеров.
Еще один совет Поэкспериментируйте с синими границами сверху и слева от окна просмотра стиля таблицы палитры Table & Boxes. Эти границы указывают, как часто модель должна повторяться. Особенно ярко их функции видны при работе с большими таблицами.
СОВЕТ 57: Настройка стиля таблицы
03_GoLive_T&T_(039-100)_rus.indd 79
17.01.2006 5:53:46
80 СОВЕТ
58
Масштабирование во вложенных таблицах
Выделение вложенных таблиц – непростая задача. Программа GoLive имеет функцию масштабирования, которая облегчает выбор вложенных родительских и подчиненных таблиц. Теперь вы можете выполнять масштабирование этих таблиц. Выделите таблицу в режиме Layout Editor или поместите курсор в ячейку таблицы и откройте палитру Table & Boxes из меню Window. Чтобы выбрать родительскую таблицу, в которую входит текущая вложенная таблица, щелкните по значку Select parent table (Выбрать родительскую таблицу) в нижнем левом углу палитры Table & Boxes (рис. 58.1). Работая с несколькими вложенными таблицами, вы можете несколько раз подряд нажать эту кнопку, чтобы выбрать другие родительские таблицы.
Рис. 58.1. Щелкните по значку Select parent table на палитре Table & Boxes, чтобы уменьшить масштаб вложенных таблиц
Чтобы выделить таблицу, которая была вложена в другую таблицу, щелкните по серой границе таблицы на палитре Table & Boxes (рис. 58.2).
Рис. 58.2. Щелкните по серой границе вложенной таблицы, чтобы увеличить масштаб
ГЛАВА 1
03_GoLive_T&T_(039-100)_rus.indd 80
Начало работы
17.01.2006 5:53:46
81 СОВЕТ
59
Выбор небольших изображений в таблицах
Многие пользователи испытывают трудности с выбором небольших изображений, например, изображений в формате GIF, которые находятся в ячейках таблицы. Вам поможет функция масштабирования (см. Совет 32), но есть и более простые способы. Например, можно использовать дерево разметки, которое находится под окном документа. Выберите ячейку таблицы с изображением. Щелкните по тэгу
на Makeup Tree (Дерево разметки) и выберите тэг . Изображение будет выделено (рис. 59.1).
Рис. 59.1. Выбирайте небольшие изображения с помощью Makeup Tree в строке состояния
Если изображение выделено, вы увидите его атрибуты в палитре Inspector (рис. 59.2). Теперь вы можете изменить размеры изображения или удалить его в палитре Inspector.
Выберите верхний блок Программа GoLive содержит функцию, которая позволяет выбирать элемент или тэг, содержащий выделенную область на текущей странице. Чтобы активировать команду Upper Block (Верхний блок), выберите ее в меню Special, либо нажмите клавиши Command+Shift+B (Mac) или Ctrl+Shift+B (Windows). Данная команда работает в режимах Layout Editor, Source Code Editor и Outline Editor. Она позволяет упростить редактирование страниц. Кроме того, с помощью команды Upper Block можно выбирать вложенные таблицы, абзацы или стилизованный текст.
Управление одним пикселем
Рис. 59.2. Вы можете изменить размеры изображения в палитре Inspector
Если вы добавляете в режиме Layout Editor изображение, состоящее из одного пикселя, его размер составит 32 × 32 пикселя, а не 1 × 1. Если вы хотите изменить размеры пикселя, щелкните по значку Set to original size (Восстановить оригинальные размеры) палитры Inspector.
СОВЕТ 59: Выбор небольших изображений в таблицах
03_GoLive_T&T_(039-100)_rus.indd 81
17.01.2006 5:53:47
82 СОВЕТ
60 Не использовать направляющие Smart Guides Если вы не хотите использовать данные направляющие, отключите опцию Show Smart Guides (Показывать направляющие Smart Guides) в меню View.
Создание макета с помощью Smart Guides
Разработчики GoLive используют в своей работе все самое лучшее. Поэтому они использовали в GoLive функцию Smart Guides (Умные направляющие), которая впервые появилась в Adobe Illustrator. Что представляет собой функция Smart Guides? Это направляющие, которые автоматически активируются при перемещении объектов на странице. Если граница одного объекта совпадает с границей другого, появляются направляющие Smart Guides, которые позволяют очень точно расположить объекты в вашем макете (рис. 60.1).
Рис. 60.1. Если граница одного объекта совпадает с границей другого объекта, автоматически появляются направляющие Smart Guides
Направляющие Smart Guides появляются в случае, если вы: • перемещаете объекты по сетке Layout Grid; • работаете с несколькими слоями; • работаете в QuickTime Editor; • работаете в SMIL Editor.
ГЛАВА 1
03_GoLive_T&T_(039-100)_rus.indd 82
Начало работы
17.01.2006 5:53:47
83 СОВЕТ
61
Изменение профилей просмотра
Палитра View в программе GoLive предлагает множество опций, о которых некоторые пользователи ничего не знают. С помощью данной палитры можно симулировать страницу в различных браузерах, а также профилях. Откройте палитру View из меню Window, затем откройте вебстраницу в режиме Layout Editor. Обратите внимание на ниспадающие меню Basic Profile (Базовый профиль) и User Profiles (Профили пользователя). Эти списки содержат подкатегории. Выберите профиль браузера в списке Basic Profiles, и ваша страница симулирует данный браузер. Пять профилей, с которыми вы работали в последнее время, приведены в верхней части списка (рис. 61.1).
Рис. 61.1. Воспользуйтесь опциями в меню Basic Profiles, чтобы симулировать страницу в различных браузерах, платформах или устройствах
Эта функция полезна в случае, если вы хотите увидеть, как будет выглядеть ваша страница в устаревшем браузере (например, на браузере, который не поддерживает CSS), либо на другом устройстве (например, на мобильном телефоне).
СОВЕТ 61: Изменение профилей просмотра
03_GoLive_T&T_(039-100)_rus.indd 83
17.01.2006 5:53:47
84 Опция Flat Menu Вы можете изменить внешний вид меню профилей. Для этого выберите опцию Flat Menu в меню Basic или User Profiles. Вы увидите список тех же опций, что и в меню с включенной опцией Structured Menu (Структурированное меню); однако все опции будут содержаться в одном меню, а не в различных подменю.
Чтобы изменить режим просмотра страницы (допустим, настроить для нее определенный размер или удалить изображения), выберите опцию в списке User Profiles. Если необходимо отредактировать текст, но мешают другие объекты, поможет опция Plain Text Only (Только текст). Пять опций, с которыми вы работали в последнее время, приведены в верхней части списка (рис. 61.2). Вы можете одновременно активировать несколько профилей пользователя.
Рис. 61.2. Меню User Profiles предлагает несколько удобных режимов просмотра, включая возможность просмотра только текста на странице
Совет Опции меню View не являются заменой тестированию страницы в браузере! Они очень удобны, но не стоит лениться. Тестируйте ваши сайты в различных браузерах и на разных платформах.
ГЛАВА 1
03_GoLive_T&T_(039-100)_rus.indd 84
Начало работы
17.01.2006 5:53:47
85 СОВЕТ
62
Включаем и выключаем невидимые элементы
Программа GoLive предлагает мощные функции управления при работе с невидимыми элементами, например, контейнерами формы, картами изображения и границами таблиц. Откройте меню команды General Invisible Elements (Невидимые элементы), и вы увидите, что можно управлять настройками невидимых маркеров документа, элементами макета и параметрами CSS. В примере, показанном на рис. 62.1, программа GoLive скрывает все невидимые элементы, кроме границ слоя и таблицы, а это, в свою очередь, позволяет скрыть ненужные объекты, но сохранить структуру страницы видимой.
Видимость и области шаблона Также вы можете скрыть невидимые объекты, чтобы временно отключить выделение заблокированных областей на странице шаблона (см. Совет 133).
Рис. 62.1. В настройках программы GoLive можно изменить параметры невидимых элементов
Чтобы воспользоваться функциями невидимых элементов, откройте страницу в режиме Layout Editor и выберите опцию Disable Invisible Items (Отключить невидимые объекты) палитры View (рис. 62.2). Также вы можете использовать команду View Show Invisible Items (Отобразить невидимые объекты).
63 Экранная подсказка Удерживая клавиши Option+Shift (Mac) или Alt+Shift (Windows), поместите курсор мыши на любой объект в режиме Layout Editor. Подождите секунду , вы увидите экранную подсказку с исходным кодом для данного объекта.
Поиск атрибутов Если в списке отсутствует нужный вам тэг или атрибут, пролистайте список, либо нажмите клавишу с первой буквой его названия, и программа GoLive перейдет к соответствующему пункту в списке. Если вы выбрали в списке тэг или атрибут, в поле Info (Информация) появится описательная информация.
Visual Tag Editor
Если вас нужно отредактировать HTML-элемент, но не хотите выходить из режима Layout Editor или выделять часть окна для другого режима просмотра, поможет Visual Tag Editor (Визуальный редактор тэгов). Используя этот редактор, вы сможете отредактировать часть кодировки или вставить новый тэг. Чтобы открыть Visual Tag Editor, выполните команду меню Special Visual Tag Editor. Если вы выделите текст на странице и откроете Visual Tag Editor, опция Wrap (Обтекать) будет активна; это значит, что новый тэг будет обтекать выделенную область. Если вы выберите тэг на дереве разметки документа (см. Совет 34) и откроете Visual Tag Editor, выбранный тэг появится в окне, а опция Edit (Правка) будет активна, следовательно, вы сможете отредактировать текущий тэг. Если вы поместите курсор в точку добавления нового тэга в режиме Layout Editor и откроете Visual Tag Editor, опция Insert (Вставка) будет активна. Чтобы добавить тэг или атрибут, введите его в поле в верхней части окна или дважды щелкните по списку слева. После добавления тэга нажмите клавишу Space (Пробел). В списке появятся атрибуты текущего тэга. Также вы можете использовать встроенное дерево разметки, чтобы осуществлять перемещение по кодировке и поиск определенного тэга (рис. 63.1).
Рис. 63.1. Visual Tag Editor
Существует много способов применения Visual Tag Editor. Приведем только один пример: откройте редактор, выберите тэг на дереве разметки и добавьте нужный ID.
ГЛАВА 1
03_GoLive_T&T_(039-100)_rus.indd 86
Начало работы
17.01.2006 5:53:48
87 СОВЕТ
64
Подсчет статистики документа
Приходилось ли вам когда-либо рассчитывать, сколько времени требуется странице для загрузки через соединение 56K? Через линию ISDN? Через T1-соединение? Чтобы получить сведения о времени загрузки страницы при различных скоростях соединения, откройте веб-страницу в программе GoLive и выберите команду Special Document Statistics, как показано на рис. 64.1.
Рис. 64.1. Статистика документа позволяет рассчитать время загрузки страницы
Диалоговое окно Document Statistics (Статистика документа) показывает размер исходного кода, изображений и всей страницы. Редакторы должны по достоинству оценить сведения о количестве символов и слов на странице. В нижней части диалогового окна находится список со сведениями о времени загрузки при разных скоростях соединения. Настоящая скорость загрузки зависит от многих факторов, например, загрузки сервера и трафика в сети Internet, но эти цифры дают общее представление. Теперь вы можете получать такую статистику для любой веб-страницы. Выберите поле флажка Show Document Statistics в поле Status (Статус) под окном документа, и вы увидите количество байт, занимаемых текущей страницей. (рис. 64.2).
Рис. 64.2. Теперь программа GoLive CS2 показывает статистику документа в режиме реального времени
СОВЕТ 64: Подсчет статистики документа
03_GoLive_T&T_(039-100)_rus.indd 87
17.01.2006 5:53:48
88 СОВЕТ
65 Различные типы документа По умолчанию программа GoLive записывает для HTMLстраниц упрощенную версию типа документа. Это вызвано тем, что полная версия типа документа (с URL-адресом DTD) может привести к проблемам в некоторых браузерах. Для XHTMLстраниц программа GoLive записывает полную версию типа документа. Чтобы переключиться между типами документа, нажав и удерживая клавишу Option (Mac) или Alt (Windows), выберите в плавающем меню пункт DOCTYPE. Это приведет к тому , что тип HTML DOCTYPE будет переключен на полную версию, а тип XHTML DOCTYPE – на упрощенную.
Добавление и изменение типов документа
DOCTYPE (Тип документа) указывается в начале каждой вебстраницы, которую вы создаете (рис. 65.1). Тип документа сообщает веб-браузерам посетителей, какая кодировка (HTML или XHTML) использовалась для создания страницы, а также способствует правильной визуализации страницы.
Рис. 65.1. В начале исходной кодировки каждой страницы указывается тип документа
Щелкните по плавающему меню в верхнем правом углу окна документа и выберите в меню DOCTYPE соответствующий тип документа (рис. 65.2). Если ваша страница использует кодировку HTML, вы сможете выбрать только тип HTML DOCTYPE; если страница использует кодировку XHTML, вы сможете выбрать только тип XHTML DOCTYPE.
Рис. 65.2. Выберите тип документа в плавающем меню. Обратите внимание: в плавающем меню вы также можете конвертировать тип разметки документа. Выполните команду Markup Convert to HTML (Разметка Конвертировать в HTML) или Markup Convert to XHTML (Разметка Конвертировать в XHTML). Все остальное сделает программа GoLive.
ГЛАВА 1
03_GoLive_T&T_(039-100)_rus.indd 88
Начало работы
17.01.2006 5:53:48
СОВЕТ
66
Управление цветом с помощью образцов цвета и цветовых палитр
Программа GoLive включает палитру Swatches (Образцы цвета), которая является аналогом палитр Swatches в Photoshop, Illustrator и InDesign (рис. 66.1). Это значит, что работа с цветами в GoLive стала намного проще. Палитра Swatches открывается по умолчанию; если вы случайно закрыли эту палитру, найдите ее в меню Window.
Рис. 66.1. Палитра Swatches в GoLive функционирует так же, как и в других приложениях Adobe
Чтобы открыть другие группы Swatches, используйте меню палитр в верхнем правом углу и выберите нужную группу. Мы рекомендуем работать с образцами VisiBone®. Если вы хотите регулярно использовать определенную группу образцов цвета, активируйте опцию Persistent (Постоянно) в меню палитры данного образца. Теперь палитра Swatches постоянно будет открыта, причем даже после того как вы выйдете из GoLive и заново запустите программу. Чтобы создать новый образец, смешайте цвет на палитре Color (Цвет) и щелкните по значку New swatch (Новый образец) палитры Swatches. В других приложениях Adobe, вы можете изменить режим просмотра для образцов цвета, чтобы одновременно видеть образцы и их описания. Программа GoLive позволяет аналогичным образом управлять вашими образцами цвета и при создании веб-дизайна. Выберите в меню палитры Swatches пункт List View (В виде списка) вместо пункта Small Thumbnail View (Небольшие эскизы).
89
Обмен образцами с программами Photoshop, Illustrator и InDesign Все приложения Creative Suite 2 могут работать с новым форматом образцов цвета. Например, вы можете создать графические объекты и образцы цвета в Photoshop, а затем обменяться ими с программой GoLive, чтобы обеспечить поддержку единого стандарта цвета. Создайте образцы в любой программе CS2 и выберите команду Save Swatches for Exchange (Сохранить образцы цвета для обмена) в любой палитре Swatches, чтобы сохранить их в новом формате .ase. Чтобы загрузить новые группы образцов, выберите в любом меню палитры Swatches пункты Open Swatch Library Other Library (Открыть библиотеку образцов цвета Другая библиотека).
СОВЕТ 66: Управление цветом с помощью образцов цвета и цветовых палитр
03_GoLive_T&T_(039-100)_rus.indd 89
17.01.2006 5:53:48
90 Поиск образцов Поиск определенных значений или названий образцов в GoLive очень прост. Активируйте опцию Show Search Fields (Отображать поля поиска) в меню палитры Swatches, и поля значения и названия цвета появятся в палитре. Чтобы найти определенный цвет, введите нужное значение и нажмите клавишу Return/Enter. Обратите внимание: эта функция работает в режимах просмотра Small Thumbnail View и List View.
Палитра Color в GoLive функционирует так же, как и в других приложениях Adobe, и включает образцы цветов для чернобелой палитры, RGB, CMYK, HSB и HSV. Чтобы переключиться между различными палитрами, щелкните по соответствующим значкам палитры Color или выберите их в плавающем меню. Выберите поле цвета в любой палитре или на панели инструментов и смешайте цвета на палитре Color, чтобы увидеть изменения в режиме реального времени (рис. 66.2).
Рис. 66.2. Используйте палитру Color, чтобы создавать образцы и смешивать новые цвета
ГЛАВА 1
03_GoLive_T&T_(039-100)_rus.indd 90
Начало работы
17.01.2006 5:53:48
91 СОВЕТ
67
Редактирование образцов в окне Color Picker
GoLive CS2 впервые позволяет редактировать образцы цвета в стандартном окне Color Picker (Выбор цвета). Это то самое окно, с которым в течение многих лет работали пользователи Adobe Photoshop и Adobe Illustrator. Чтобы создать новый образец, щелкните по значку New (Новый) в палитре Swatches. Затем щелкните по значку Pencil (Карандаш) в левом нижнем углу палитры Swatches, чтобы активировать режим Edit; дважды щелкните по любому образцу, чтобы открыть окно Color Picker (рис. 67.1).
Рис. 67.1. Дважды щелкните по образцу в режиме Edit, чтобы открыть окно Color Picker
В диалоговом окне выбора цвета вы можете смешать цвет с моделью HSB, RGB, Lab или CMYK (если вы пытаетесь добиться соответствия между цветом веб-сайта и другим цветом). Если вы хотите ограничить цвета палитрой Web Safe 216-ти цветов (см. Совет 68), выберите опцию Only Web Colors (Только цвета веб) в левом нижнем углу диалогового окна. Если вы хотите смешать несколько образцов в данном диалоговом окне, нажмите кнопку Add to Swatches (Добавить образцы цвета) для каждого нового цвета. После завершения смешивания цветов нажмите кнопку OK. Перед тем как продолжить, обратите внимание на то, что вы можете вводить для образцов новые названия. В режиме Edit можно выбрать образец на палитре Swatches и привязать название в поле Name (Имя) (рис. 67.2). Рис. 67.2. Введите новые названия для образцов, чтобы упростить их поиск
СОВЕТ 67: Редактирование образцов в окне Color Picker
03_GoLive_T&T_(039-100)_rus.indd 91
17.01.2006 5:53:49
92 СОВЕТ
68 Нужно ли использовать цвета Web Safe? В прошлом большинство мониторов могли отображать только 256 цветов. Поэтому веб-дизайнеры старались ограничить количество цветов 216 цветами Web Safe, чтобы избежать возможных искажений. С тех пор компьютерные мониторы и видеокарты прошли долгий путь развития, и сейчас они могут отображать тысячи и миллионы цветов. Это значит, что вам больше не нужно ограничивать настройки палитры цветами Web Safe.
Выбор цветов Web Safe
Если необходимо выбрать цвета Web Safe (Безопасные в веб), программа GoLive позволяет это сделать. Проще всего выбрать цвета из образцов VisiBone®, VisiBone2®, Web Hues, Web Safe или Web Spectrum в палитре Swatches (рис. 68.1).
Рис. 68.1. Некоторые группы образцов отображают только цвета Web Safe
Еще один способ убедиться в том, что вы выбрали образец цвета Web Safe, состоит в том, чтобы активировать опцию List View (Список) в палитре Swatches и выбирать только те цвета, рядом с которыми отображается значок в виде небольшого куба (рис. 68.2). Наконец, вы можете активировать опцию Web Colors Only (Только цвета веб) в меню палитры Color, смешивать и использовать только цвета Web Safe.
Рис. 68.2. Если рядом с названием цвета в режиме списка отображается значок в виде небольшого куба, это значит, что данный цвет является Web Safe
ГЛАВА 1
03_GoLive_T&T_(039-100)_rus.indd 92
Начало работы
17.01.2006 5:53:49
93 СОВЕТ
69
Использование инструмента Eyedropper
Инструмент Eyedropper (Пипетка) в палитре Color позволяет быстро выбрать цвет любого объекта на экране. Он работает и в других окнах и приложениях, которые вы открываете на заднем плане. Например, инструмент Eyedropper позволяет совместить цвет выделенного текста на веб-странице с цветом открытого документа Photoshop или логотипа Illustrator. Выберите инструмент Eyedropper в палитре Color и поместите курсор мыши на цвет, который вы хотите выбрать (рис. 69.1). Когда вы увидите нужный цвет в верхнем левом углу палитры Color, щелкните, чтобы применить выбранный цвет к выделенной области.
Удаление цвета Мы показали несколько способов применения цвета, а как же его удалить? Выберите текст или поле для изменения и щелкните по значку Remove Color (Удалить цвет) в виде белого поля с красной линией слева от палитры Color. Также вы можете выполнить команду Type Remove Color (Тект Удалить цвет) для выделенного текста.
Рис. 69.1. Используйте инструмент Eyedropper, чтобы выбирать цвет любого объекта на экране
СОВЕТ 69: Использование инструмента Eyedropper
03_GoLive_T&T_(039-100)_rus.indd 93
17.01.2006 5:53:49
94 СОВЕТ
70 Где использовать контекстные меню цвета В программе GoLive поля цвета находятся на панели инструментов, в редакторе CSS Editor, в разделе Highlight палитры View и в некоторых вкладках палитры Inspector.
Контекстное меню для выбора цвета
Обычно для добавления цвета необходимо выделить объект, затем выбирать соответствующее поле цвета и образец на палитре Swatches (либо смешать цвет в палитре Color). Этот способ позволяет добиться результата, но, вероятно, вы заметили, что в правом нижнем углу каждого поля цвета в GoLive имеется небольшой черный треугольник. Если вы щелкните по этому треугольнику, откроется небольшое окно выбора образца цвета (рис. 70.1). Также вы можете выполнить Ctrl+щелчок (Mac) или щелчок правой кнопкой мыши (Windows) на любом поле цвета, чтобы открыть это контекстное меню.
Ссылка на Adobe Color Picker Если вы не хотите выбирать цвет в палитре Swatches, дважды щелкните по любому полю цвета, чтобы получить доступ к Adobe Color Picker. Выберите цвет в окне и нажмите кнопку OK. Выбранный вами цвет отобразится в поле.
Рис. 70.1. Вы можете быстро выбрать цвет в контекстном меню поля цвета
Основное преимущество этого меню заключается в том, что можно выбрать группу образцов, которая открывается при их активации. В ниспадающем меню вы можете выбрать любую установленную группу образцов, включая образцы VisiBone® (рис. 70.2).
Рис. 70.2. Вы можете настроить группу образцов, которая открывается из поля цвета
ГЛАВА 1
03_GoLive_T&T_(039-100)_rus.indd 94
Начало работы
17.01.2006 5:53:49
95 СОВЕТ
71
Сохранение недавно использовавшихся цветов
При создании сайта или веб-страницы, следует задуматься о том, чтобы сохранить постоянство цветов. Если вы смешали цвет и хотите его сохранить, щелкните по кнопке в виде треугольнику в левом нижнем углу палитры Color, чтобы добавить данный цвет в список недавно использовавшихся цветов (рис. 71.1). Цвета, которые вы применяете к объектам, автоматически добавляются в строку образцов. Эта опция позволяет сохранять цвета и сравнивать их между собой. Если в палитре Color вы не видите строку образцов, проверьте, выбрали ли вы опцию Show Recent Colors (Показывать недавно использовавшиеся цвета) в меню палитры.
Рис. 71.1. В нижней части палитры Color отображаются образцы недавно использовавшихся цветов
Чтобы просмотреть другие недавно использовавшиеся цвета, разверните палитру Color. Если вы хотите полностью просмотреть все цвета, выполните команду Window Swatch Libraries Recent Colors (Окно Библиотеки образцов цвета Недавно использовавшиеся цвета). Измените режим просмотра в меню палитры на List View, и вы увидите, что программа GoLive отслеживает все цвета, с которыми вы работаете, и даже записывает дату и время записи (рис. 71.2).
Рис. 71.2. Программа GoLive автоматически отслеживает все цвета, с которыми вы работаете
СОВЕТ 71: Сохранение недавно использовавшихся цветов
03_GoLive_T&T_(039-100)_rus.indd 95
17.01.2006 5:53:49
96 Определившись с выбором цветов для сайта, вы можете их сохранить. Допустим, что вы создали группу цветов на вкладке Colors в окне Site и хотите добиться соответствия этим стандартам на всех страницах сайта. Выполните команду Window Swatch Libraries Site Colors (Цвета сайта), и вы увидите, что данная группа образцов полностью совпадает с группой на вкладке Colors в окне Site (рис. 71.3). Теперь вам не придется следить за тем, чтобы случайно не смешать шесть различных оттенков зеленого цвета.
Рис. 71.3. Если вы выбираете образцы Site Colors в палитре Swatches, вы сможете добиться постоянства цвета для всех страниц сайта
ГЛАВА 1
03_GoLive_T&T_(039-100)_rus.indd 96
Начало работы
17.01.2006 5:53:50
97 СОВЕТ
72
Система управления цветом
Как и другие приложения пакета Adobe Creative Suite, GoLive предлагает систему управления цветом изображений и макетов (рис. 72.1). Откройте диалоговое окно Color Settings (Настройки цвета) в меню Edit.
Управление цветом в The Bridge Если вы работаете с пакетом Adobe Creative Suite 2, воспользуйтесь приложением Bridge, чтобы изменить настройки цветов. Это позволяет добиться соответствия настроек цвета для всех приложений.
Рис. 72.1. Все приложения пакета Creative Suite используют единую систему управления цветом
Детальное описание методики управления цветом не является целью данной книги; независимо от того, используете вы установки по умолчанию или создаете новые установки, вы можете обмениваться ими с другими приложениями Creative Suite. Управление цветом GoLive становится полезным, если вы применяете функцию Smart Objects , чтобы конвертировать исходные файлы, например, файлы Photoshop и Illustrator, в такие вебформаты, как GIF или JPEG (см. Совет 141).
СОВЕТ 72: Система управления цветом
03_GoLive_T&T_(039-100)_rus.indd 97
17.01.2006 5:53:50
98 СОВЕТ
73
Устранение неполадок с помощью функции Highlight
Highlight (Выделение) является очень мощной функцией и имеет так много применений, что мы не сможем здесь описать их полностью. Откройте веб-страницу, откройте палитру View (Вид) и перейдите на вкладку Highlight (рис. 73.1). Также вы можете активировать многие опции Highlight из подменю View Highlight.
Рис. 73.1. Функция Highlight позволяет находить и устранять различные ошибки на странице
Функция Highlight поддерживает опцию Link Warnings и опцию Syntax Checker (Проверка синтаксиса) , но ее возможности этим не ограничиваются. Например, ниспадающее меню Elements (Элементы) отображает алфавитный список, включающий все элементы на странице. Выберите элемент, и все повторы тэга на странице будут выделены. Вы даже можете выбрать несколько элементов и получить сведения обо всех повторах на странице.
ГЛАВА 1
03_GoLive_T&T_(039-100)_rus.indd 98
Начало работы
17.01.2006 5:53:50
99
Также вы можете применять данную функцию для поиска объектов CSS на странице. Откройте страницу в GoLive и выберите CSS-класс или ID в ниспадающем меню CSS, чтобы выделить все стилизованные объекты. Функция Highlight (Выделение) имеет ниспадающее меню Special, включающее различные объекты, которые вы можете выделить на странице. Одной из популярных опций в этом меню является опция JavaScript Actions, которая отображает, какие действия выполняются на странице. С помощью раздела Colors палитры можно изменять цвет, прозрачность и стиль выделения для любых объектов, начиная от ссылок и предупреждающих сообщений и заканчивая заблокированными и обычными областями. Изучите эти опции, и вы наверняка найдете свое применение для функции Highlight.
СОВЕТ 73: Устранение неполадок с помощью функции Highlight
03_GoLive_T&T_(039-100)_rus.indd 99
17.01.2006 5:53:50
100 СОВЕТ
74
Использование функций OS X Services
Данный раздел предназначен только для пользователей Mac. Если вы еще не знаете, что представляют собой функции OS X Services, далее мы познакомим вас с ними. Это системные функции, доступные в меню большинства программ OS X. Чтобы использовать службу, выделите текст в режиме Layout Editor или в файле окна Site и выберите опцию в меню GoLive Services (Службы). См. рис. 74.1.
Рис. 74.1. Вы можете управлять выделенным текстом с помощью служб OS X
Вам доступно большое количество служб. Далее мы расскажем о некоторых опциях, которые используются чаще всего: • Open URL (Открыть URL-адрес). Выберите адрес вебсайта в режиме Layout Editor, чтобы открыть данный сайт в вашем веб-браузере; • Search with Google (Выполнить поиск в системе Google). Выделите текст и используйте его как критерий для поиска в самой популярной поисковой системе в мире; • Send File to Bluetooth Device (Отправить файл на устройство Bluetooth). Выделите в окне Site файл, например, презентацию SMIL, фильм MPEG или изображение JPEG, и отправьте его на беспроводное устройство. Эта функция будет работать только в том случае, если ваш компьютер Mac и ваше устройство поддерживают стандарт Bluetooth; • Speech (Речь). Выделите текст, и система прочитает его вслух. Это позволяет проверить то, что вы написали; • Summarize (Суммировать). Выделите весь текст на странице или в абзаце, и ваш компьютер суммирует его. Это может помочь в составлении описательных метатэгов; • Translate (Перевести). Загрузите службу Translate Service с сайта www.kavasoft.com/TranslationService/, и вы сможете перевести текст на разные языки.
ГЛАВА 1
03_GoLive_T&T_(039-100)_rus.indd 100
Начало работы
17.01.2006 5:53:50
101
ГЛАВА 4
Сложное редактирование страниц В главах 2 и 3 мы дали базовые знания, которые необходимы для того, чтобы начать создание сайта в GoLive CS2. В этой главе мы расскажем о функциях, которые предназначены для более опытных пользователей. Изучение инструментов создания страниц в GoLive не занимает много времени, сначала следует познакомиться с другими доступными режимами редактирования: Frames Editor, Source Editor и Outline Editor. В данной главе мы не только продемонстрируем дополнительные возможности редактирования, но и научим исправлять ошибки на страницах, проверять ваш код, добавлять типы документов и так далее. Когда вы освоите обработку кода HTML, мы покажем, как использовать инструменты просмотра GoLive для проверки вашего сайта. Опции просмотра в GoLive CS2 включают Page Preview (Предварительный просмотр страницы), Live Rendering (Визуализация в режиме реального времени), Preview in Browser (Просмотр в браузере) и PDF Preview (Просмотр в формате PDF). Каждая опция обладает уникальными возможностями. Также мы расскажем и о новой функции GoLive, которая позволяет создавать и редактировать файлы в формате PDF, а также управлять ссылками, которые в них входят.
04_GoLive_T&T_(101-144)_rus.indd 101
19.01.2006 21:51:09
102 СОВЕТ
75
Создание макета с использованием фреймов
Применяя фреймы, вы можете разделить окно браузера на отдельные окна, в которых могут отображаться отдельные HTMLстраницы. В прошлом фреймы очень часто использовались для создания веб-сайтов, но сейчас они стали менее популярны. Вероятно, это вызвано проблемами, которые возникают во время индексирования поисковыми системами страниц с фреймами. Время от времени фреймы могут оказаться полезными; управление фреймами в GoLive достаточно эффективно. Наборы конфигураций находятся в разделе Frame (Фрейм) палитры Objects. Чтобы получить к ним доступ, выберите пункт Frame в ниспадающем меню Object sets палитры Objects . Чтобы использовать данные объекты, нажмите вкладку Frame Editor в верхней части окна документа; вы войдете в режим редактирования фреймов и сможете переместить объект Frame на страницу. После этого в палитре Inspector отобразятся две вкладки: Frame и Frameset. Атрибуты на вкладке Frame применяются к отдельным частям группы фреймов, а атрибуты на вкладке Frameset применяются к границе и разделителям между фреймами. Также вы можете редактировать атрибуты группы фреймов. Для этого щелкните по одной из границ группы (рис. 75.1).
Рис. 75.1. Вкладки Frame и Frameset дают возможность настройки атрибутов для отдельных фреймов и их групп
Чтобы изменить размер фрейма, введите значения в пикселях в полях Height и Width палитры Inspector, либо переместите разделители фреймов. Чтобы добавить в конфигурацию дополнительные фреймы, переместите на страницу еще один объект Frame, либо нажмите кнопку Create New Frame (Создать новый фрейм) в палитре Inspector. Выберите опцию
ГЛАВА 4
04_GoLive_T&T_(101-144)_rus.indd 102
Сложное редактирование страниц
19.01.2006 21:51:18
103
в ниспадающем меню Scroll (Прокрутка). Это позволит указать, должна ли отображаться в окне полоса прокрутки. Выбрав поле флажка Resize (Изменять размеры), вы дадите пользователям возможность изменять размеры фрейма. Если вы не хотите видеть границу между разделами, отметьте поле флажка рядом с опцией Border (Граница) на вкладке Frameset и нажмите клавишу 0; вам также понадобится отметить поле флажка Frame Border (Граница фрейма) и выбрать в ниспадающем меню пункт No (Нет). На вкладке Frameset вы можете настроить цвет границы; однако в различных браузерах результат может выглядеть по-разному. Укажем, какие страницы должны отображаться в разделах группы фреймов. Чтобы привязать страницы к фрейму, щелкните по нему и создайте ссылку на страницу в окне Site с помощью поля URL в палитре Inspector. Также вы можете переместить страницу из окна Site во фрейм, чтобы создать ссылку. Вводите для каждого фрейма в группе уникальное название с помощью поля Name на вкладке Frame. Впоследствии во время создания ссылок на страницы в группе используйте ниспадающее меню, чтобы выбрать название фрейма, либо вводите название в поле Target (Конечный фрейм) палитры Inspector, чтобы указать фреймы для загрузки ссылки (рис. 75.2).
Автоматическая корректировка типа документа Если вы поместите объект Frame на страницу , которая не содержит соответствующий тип документа для фреймов (см. Совет 65), программа GoLive откроет диалоговое окно с текущим и предлагаемым типом документа. Чтобы принять изменение, нажмите кнопку OK. Если вы не хотите менять тип документа, нажмите кнопку Cancel.
Рис. 75.2. При создании ссылок в группах выберите конечный фрейм
После завершения настройки вы можете нажать кнопку Start рядом с опцией Preview Frame (Просмотреть фрейм) в палитре Inspector или кнопку Preview Frameset (Просмотреть группу фреймов), чтобы открыть окно предварительного просмотра. После активации кнопка будет переименована в Stop. Нажмите ее, чтобы закрыть окно предварительного просмотра.
СОВЕТ 75: Создание макета с использованием фреймов
04_GoLive_T&T_(101-144)_rus.indd 103
19.01.2006 21:51:18
104 СОВЕТ
76 Использовать i-фреймы или нет? Некоторые устаревшие браузеры не поддерживают i-фреймы, поэтому предварительно советуем протестировать ваши фреймы в текущем браузере.
Создание i-фреймов
Что представляет собой первый объект в группе Frame , и почему вы не можете переместить его в группу фреймов? Это необычный фрейм. Данный фрейм называется i-фрейм; он используется не для составления группы, а для создания фрейма на обычной HTML-странице. Вы можете поместить i-фрейм в любом месте на странице, чтобы создать эффект виртуального окна. Если вы хотите создать i-фрейм, откройте страницу в режиме Layout Editor и переместите на нее объект iFrame. Вы можете поместить данный объект в слой, в ячейку таблицы или в любое другое место на странице (рис. 76.1).
Рис. 76.1. Чтобы добавить i-фрейм на страницу, поместите его в слой, в ячейку таблицы или на сетку
Чтобы настроить страницу, которая будет загружаться в iфрейм, воспользуйтесь полем Source в палитре Inspector или переместите страницу из окна Site в i-фрейм. В палитре Inspector настройте такие параметры, как высоту, ширину или выравнивание i-фрейма. При необходимости добавьте поле. Для этого введите размеры в пикселях в полях Margin или пометьте поле флажка Border, если вы хотите отобразить границу i-фрейма.
ГЛАВА 4
04_GoLive_T&T_(101-144)_rus.indd 104
Сложное редактирование страниц
19.01.2006 21:51:18
105 СОВЕТ
77
Настройка внешнего вида исходного кода (темы)
Программа GoLive CS2 может настраивать внешнего вида исходного кода с использованием тем. Темы доступны в редакторе Source Editor, в режиме просмотра Split Source, в редакторе JavaScript Editor и на вкладке Source редактора CSS Editor. Для того чтобы открыть тему, выберите ее в ниспадающем меню Theme (Тема), как показано на рис. 77.1.
Рис. 77.1. Выберите тему в ниспадающем меню Theme редактора Source Editor
Несмотря на то, что в программе GoLive изначально сконфигурировано большое количество тем, вы можете создавать новые темы или редактировать те, которые уже существуют. В среде Mac выполните команду GoLive Preferences (Настройки программы); в среде Windows выполните команду Edit Preferences (Настройки программы). Далее откройте панель Source параметров и нажмите кнопку Themes. Выберите тип темы или отредактируйте тему в ниспадающем меню Syntax (Синтаксис), а затем выберите тему в ниспадающем меню Theme. Выберите тип и размер шрифта, а также цвет текста и фона темы в верхней части диалогового окна Preferences. Чтобы настроить определенные цвета и стили шрифта для текста, тэгов, атрибутов и так далее, выберите опцию в списке слева и укажите стиль с помощью поля Color, кнопок шрифта и ниспадающего меню Size справа (рис. 77.2).
Программа Theme Manager Программа GoLive CS2 поставляется в комплекте с обновлением Theme Manager, которое позволяет копировать, удалять, переименовывать, изменять порядок, импортировать или экспортировать темы. За дополнительной информацией по обновлениям обратитесь к Совету 236. Чтобы включить обновление, откройте параметры GoLive и добавьте галочку в поле Theme Manager (Управление темами) в разделе Modules (Модули). После перезапуска GoLive вы найдете в меню Special новый пункт, Theme Manager. Выберите его, чтобы открыть программу управления темами исходного кода.
Темы не используются браузерами Темы влияют только на внешний вид кода в программе GoLive. Они никак не воздействуют на макет или функционирование страниц в веб-браузере.
Настройка темы по умолчанию Рис. 77.2. Отредактируйте темы в разделе Themes параметров GoLive
СОВЕТ 77: Настройка внешнего вида исходного кода (темы)
04_GoLive_T&T_(101-144)_rus.indd 105
Чтобы настроить тему по умолчанию, воспользуйтесь ниспадающим меню в разделе Source параметров. Вы можете указать тему по умолчанию (для просмотра на экране) и тему для печати, которая будет использоваться при печати страницы из программы GoLive.
19.01.2006 21:51:18
106 СОВЕТ
78 В соответствии с контекстом Функция завершения кодировки воспринимает контекст; если вы работаете с PHP, будет отображен список соответствующих элементов, как и при работе с JavaScript.
Автоматическое завершение кода и настройка параметров
Допустим, что вы совершили ошибку при редактировании исходного кода, а затем вам пришлось потратить много времени на ее поиск и исправление. Не беспокойтесь – система автоматического ввода кода в GoLive CS2 позволяет создавать идеальные страницы. Введите открывающую скобку в режиме Source Editor. Откроется список с полным набором тэгов, относящихся к данному типу кода (рис. 78.1).
Рис. 78.1. Если вы включите функцию завершения кода и введете исходный код, откроется список доступных тэгов
Если вы введете первую букву нужного тэга, то автоматически перейдете к данной букве в списке. Вы можете пролистывать список с помощью клавиш Up arrow и Down Arrow, а также выделять тэг с помощью клавиши Return/Enter или двойного щелчка мыши. При этом тэг будет добавлен в код. Когда вы нажмете клавишу Пробел, откроется список атрибутов для данного тэга. Сделайте выбор в списке. По умолчанию функция завершения кодировки включена, но при желании вы можете ее отключить. Для настройки параметров функции выполните команду GoLive Preferences (Mac) или Edit Preferences (Windows) и выберите в разделе Source пункт Syntax (рис. 78.2).
ГЛАВА 4
04_GoLive_T&T_(101-144)_rus.indd 106
Сложное редактирование страниц
19.01.2006 21:51:18
107
Отключение выделения цветом для кодировки
Рис. 78.2. В окне параметров вы можете отключить или настроить функцию завершения кодировки
Если вы выберите опцию Enable Immediate Completion (Активировать немедленное завершение), в кодировку будут добавлены необходимые конечные тэги. Выбрав опцию Balance While Typing (Сохранять баланс при вводе), при вводе закрывающей скобки вы автоматически переместитесь к следующей открывающей скобке. Переместив ползунок к нулю, вы уменьшите задержку для ниспадающего списка.
Чтобы отключить выделение цветом для кодировки, нажмите кнопку Colorize Code (Выделять кодировку цветом) в режиме Source Editor. Если вы отключите данную функцию на одной странице, она будет отключена и на всех других страницах, включая режим просмотра Source в редакторе CSS Editor, режим просмотра Split Source и редактор JavaScript Editor.
СОВЕТ 78: Автоматическое завершение кода и настройка параметров
04_GoLive_T&T_(101-144)_rus.indd 107
19.01.2006 21:51:18
108 СОВЕТ
79 Что представляют собой параметры Web Settings (Настройки веб)? В ниспадающем меню General Markup Options диалогового окна Rewrite Source Code вы найдете опцию Web Settings. Используя эти параметры, продвинутый пользователь сможет очень точно настроить запись кода в программе GoLive. В среде Mac выполните команду GoLive Web Settings; в среде Windows выполните команду Edit Web Settings. Внимание: если вы не знаете точно, что именно вы делаете, лучше не делайте ничего! Вы можете полностью разрушить ваш исходный код.
Перезапись исходного кода
Мы предпочитаем записывать исходный код строго определенным образом. Время от времени в результате долгого редактирования форматирование исходного кода может нарушиться. Для исправления этой проблемы мы используем команду Rewrite Source Code (Переписать исходный код). Не следует путать эту команду с командой, которая позволяет устранять ошибки в кодировке. Данная команда восстанавливает форматирование кодировки в соответствии со спецификациями, учитывая разрывы строк, отступы, прописные и строчные буквы, а также CSS-форматирование. Вы найдете эту команду в меню Special Source Code Rewrite Source Code. После вызова команды откроется диалоговое окно с функциями перезаписи кода. Диалоговое окно содержит четыре раздела: HTML Options (Параметры HTML), CSS Options (Параметры CSS), General Markup Options (Общие параметры разметки) и Text Options (Параметры текста). Чтобы настроить параметры, выберите опцию в ниспадающем меню. После завершение настройки выберите файлы для перезаписи с помощью ниспадающего списка Work On (Работать с). См. рис. 79.1.
Рис. 79.1. Диалоговое окно Rewrite Source Code предлагает несколько опций форматирования кода, а также возможность выбора файлов для перезаписи
Совет Вы можете привязать к команде Rewrite Source Code комбинацию клавиш, чтобы упростить ее вызов.
ГЛАВА 4
04_GoLive_T&T_(101-144)_rus.indd 108
Сложное редактирование страниц
19.01.2006 21:51:19
109 СОВЕТ
80
Выбор тэгов в режиме Source Editor
Чтобы выделить весь блок кода между открывающим и закрывающим тэгами, дважды щелкните по открывающей скобке любого тэга. Например, чтобы выбрать блок кодировки между открывающим и закрывающим тэгами
, включая сами тэги, дважды щелкните по левой скобке открывающего тэга
. Если вы дважды щелкните по правой скобке тэга
, вы выделите содержимое тэга, но не сам тэг (рис. 80.1).
Рис. 80.1. Чтобы выделить весь тэг, дважды щелкните по его левой скобке. Чтобы выделить только содержимое открывающего и закрывающего тэга, дважды щелкните по правой скобке
Аналогичным образом вы можете выбрать атрибут и его значение: дважды щелкните по символу равенства (=) после атрибута. Если вы хотите выбрать только значение, но не сам атрибут, дважды щелкните по любому из символов кавычек до или после значения. Наконец, чтобы выделить параметр CSS и его значение, дважды щелкните по символу двоеточия перед значением. Когда вы освоите эти методики, работа с исходным кодом покажется намного более простой.
СОВЕТ 80: Выбор тэгов в режиме Source Editor
04_GoLive_T&T_(101-144)_rus.indd 109
19.01.2006 21:51:19
110 СОВЕТ
81 В алфавитном порядке, пожалуйста Список Navigate Through Code заполняется согласно порядку , в который тэги, функции или определения появляются на странице. Если вы предпочитаете отсортировать список в алфавитном порядке, выполните Alt+щелчок (Mac), или щелчок правой кнопкой мыши (Windows) во время нажатия кнопки Navigate Through Code.
ГЛАВА 4
04_GoLive_T&T_(101-144)_rus.indd 110
Навигация в исходном коде
В вашей исходном коде всегда имеется текст, который Вы редактируете. Но чтобы найти этот текст, вы должны помнить номер строки, правильно? Не совсем. Программа GoLive CS2 содержит номер строк и даже включает функцию, которая упрощает поиск нужной части кода. Чтобы перейти к определенной строке, введите ее номер в небольшом поле ввода в левом нижнем углу страницы и нажмите клавишу Return/Enter (рис. 81.1). Программа GoLive поместит курсор в начало данной строки. Команда Special Source Code Go To Line открывает поле, в котором вы вводите номер строки и нажимаРис. 81.1. Введите номер ете клавишу Return/Enter (рис. 81.2). строки и нажмите клавишу Добавьте комбинацию клавиш для Return/Enter, чтобы перейти этого пункта меню, чтобы упроск нужной строке кода тить управление кодировкой. Также вы можете использовать новую кнопку Navigate Through Code (Навигация по коду) в режимах Source Editor, CSS Editor, JavaScript Editor и в режиме просмотра Split Source . Эта кнопка автоРис. 81.2. Команда матически связывается с любыми Go To Line упрощает тэгами на HTML-странице, котоперемещение по коду рые имеют название (см. Совет 91). В редакторе JavaScript Editor эта кнопка заполняется функциями на странице при работе с JavaScript, VBScript, ASP, или Perl. В редакторе CSS Editor эта кнопка заполняется определениями. Выберите пункт в списке, чтобы перейти непосредственно к этой части кода. Но что делать, если часть кода, к которой вы хотите перейти, представляет собой тэг, не имеющий названия? В этом случае создайте новый маркер. Просто поместите ваш курсор в место, куда вы хотите добавить маркер, и нажмите кнопку Navigate Through Code. Выберите опцию New Marker (Новый маркер). Введите название маркера и нажмите кнопку OK. В следующий раз при нажатии на кнопку новый маркер отобразится в списке.
Сложное редактирование страниц
19.01.2006 21:51:19
111 СОВЕТ
82
Создание новых объектов в режиме Source Editor
В главе 3 мы объяснили, как перемещать объекты из палитры Objects и перемещать в режиме Layout Editor (см. Совет 37). Но знаете ли вы, что можно использовать эти объекты и в режиме Source Editor? Для этого откройте новую HTML-страница в GoLive и переключитесь в режим Source Editor. Затем переместите объект Table из палитры Objects на страницу между открывающим и закрывающим тэгами (рис. 82.1). Готово! Появилась таблица. Перейдите к объектам Head и переместите метаобъект в заголовок страницы. Готово! Появился метатэг. Дважды щелкните по слову «generic», чтобы выделить его, и ввести значение, которое вы хотите использовать. Скомбинируйте палитру Objects и функцию завершения кодировки, и вы существенно повысите эффективность редактирования исходного кода.
Редактор Outline Editor Таким образом, вы можете использовать объекты палитры Objects в режимах Layout Editor и Source Editor. Было бы удобно использовать эти объекты и в режиме Outline Editor. Это возможно! Просто воспользуйтесь мышью. За дополнительной информацией по режиму Outline Editor обратитесь к Советам 85–91.
Рис. 82.1. Вы можете использовать палитру Objects, чтобы записать маркер объекта в режиме Source Editor. Просто переместите объект на страницу. На первом рисунке вы видите объект Table, который перемещается; на втором рисунке показан код, который был записан, когда мы отпустили объект
СОВЕТ 82: Создание новых объектов в режиме Source Editor
04_GoLive_T&T_(101-144)_rus.indd 111
19.01.2006 21:51:19
112 СОВЕТ
83
Сохранение выделения в различных режимах
Различные режимы программы GoLive облегчают решение разнообразных задач. К счастью, вы можете переключаться между режимами без потери информации. Например, если вы выделите в режиме Layout Editor объект (изображение, таблицу или текст) и переключитесь в режим Source Code Editor, код данного объекта останется выделенным (рис. 83.1).
Рис. 83.1. Выделение сохраняется в режимах Layout Editor, Source Code Editor и Outline Editor
Если вы повторно переключитесь в Outline Editor, объект будет по-прежнему выделен. Если затем вы выберете какойлибо атрибут в Outline Editor и перейдете в режим Source Code Editor, будет выделен только код данного атрибута. Взаимодействие различных режимов производят сильное впечатление. Функция Cueing упрощает переключение между различными режимами редактирования, потому что не приходится несколько раз подряд искать на странице один и тот же объект. Кроме того, вы сможете больше узнать об HTML-программировании, так как вы сможете сразу увидеть код, который соответствует выбранному вами объекту.
ГЛАВА 4
04_GoLive_T&T_(101-144)_rus.indd 112
Сложное редактирование страниц
19.01.2006 21:51:19
113 СОВЕТ
84
Проверка исходного кода
Вы тратите много времени на создание страниц с интересным дизайном и удобной навигацией. Вам следует убедиться в том, что на страницах нет ошибок и они содержат правильные ссылки, которые будут корректно работать в веб-браузере. Используя встроенную в программу GoLive функцию Check Syntax (Проверка синтаксиса), вы сможете проверить, соответствуют ли ваши страницы определенному DTD (см. Совет 65), и правильно ли была составлена ваша кодировка (завершены ли все пары тэгов и так далее). Чтобы применить данную функцию, выполните команду Edit Check Syntax, нажмите кнопку Check Syntax на вкладке Highlight палитры View или выполните Ctrl+щелчок (щелчок правой кнопкой мыши в среде Windows) на странице с вкладки Files окна Site и выберите пункт меню Check Syntax (рис. 84.1).
Рис. 84.1. Вам доступны пункт Check Syntax в меню Edit, команда Check Syntax в контекстном меню и кнопка Check Syntax на вкладке Highlight палитры View
Откроется диалоговое окно. Пользуясь полями флажка в разделе Comply With (Соответствует) слева выберите один или несколько DTD (Document Type Definition – Описания типа документа) для проверки. Также вы можете выполнить только проверку на наличие ошибок. Раздел Additionally Allowed (Также допускается) слева внизу позволяет программе GoLive пропускать некоторые тэги и атрибуты во время проверки (рис. 84.2). Если вы планируете использовать специальную кодировку GoLive, выберите соответствующие поля флажка (см. Совет 222).
Рис. 84.2. Выберите DTD (Document Type Definition) для проверки и укажите дополнительные элементы, которые будут пропущены
СОВЕТ 84: Проверка исходного кода
04_GoLive_T&T_(101-144)_rus.indd 113
19.01.2006 21:51:19
114 Пропустите диалоговое окно Если вы хотите работать с теми установками, которые использовали при последней проверке ошибок, удерживайте клавишу Shift нажатой во время щелчка по значку Check Syntax на палитре Highlight. Вы пропустите диалоговое окно и сразу вернетесь к настройкам.
По умолчанию поля флажка Warning (Предупреждение) и Error (Ошибка) в верхнем правом углу выделены. Не отключайте эти опции. Завершив настройку, нажмите кнопку OK. Будет выполнена проверка, вы увидите список результатов (рис. 84.3). Если были обнаружены ошибки или предупреждения, они будут выделены на странице.
Рис. 84.3. После проверки вы увидите список результатов
Двойной щелчок на предупреждении или ошибке в списке результатов позволяет просмотреть ошибку на странице. Использование режима Outline Editor (Редактор структуры) – самый простой путь к исправлению ошибки. Вы увидите не только ошибки на странице, но и краткое описание проблемы. Если необходимый атрибут тэга отсутствует, Outline Editor помещает маркер рядом с ним в списке атрибутов тэга. Это существенно упрощает исправление ошибки (рис. 84.4).
Рис. 84.4 Режим Outline Editor – лучший выбор для устранения ошибок
Вы можете запускать инструмент Check Syntax на одной странице, на нескольких страницах в окне Site, или на всем сайте (если вы открыли окно Site, но не выбрали ни одну страницу).
ГЛАВА 4
04_GoLive_T&T_(101-144)_rus.indd 114
Сложное редактирование страниц
19.01.2006 21:51:19
115 СОВЕТ
85
Работа в режиме Outline Editor
Outline Editor (Редактор структуры) в GoLive – уникальный и мощный режим, который упрощает создание веб-страниц и исходного кода. В Outline Editor вы можете решать самые различные задачи, но главное преимущество этого режима состоит в том, что он отображает структуру документа (рис. 85.1).
Рис. 85.1. Outline Editor существенно упрощает вашу работу
Однако Outline Editor не только показывает ваш код. Он также позволяет редактировать и добавлять страницы. Если необходимо проверить сложную страницу или вложенную таблицу, воспользуйтесь этим режимом. Чтобы добавить страницы в Outline Editor, просто переместите объекты из палитры Objects в структуру документа. Режим Outline Editor также дает возможность больше узнать об исходном коде в среде, которая позволяет минимизировать ошибки. Вы можете изучать все, начиная от структуры таблиц и заканчивая атрибутами изображений. Это мощный инструмент для обучения HTML-программированию и веб-дизайну.
СОВЕТ 85: Работа в режиме Outline Editor
04_GoLive_T&T_(101-144)_rus.indd 115
19.01.2006 21:51:20
116 СОВЕТ
86 Управляется типом документа Список атрибутов, доступных для выбранного элемента, управляется текущим типом документа (см. Совет 65) страницы. Это означает, что список доступных атрибутов для элемента может быть длиннее или короче, в зависимости от текущего типа документа. Это – не только полезный инструмент обучения, но и средство создания корректного кода.
Работа с элементами и атрибутами в режиме Outline Editor
Вы можете добавить атрибуты к элементам, даже если вы не помните названия атрибута или надлежащий синтаксис. Просто выберите новый атрибут для выделенного элемента в ниспадающем меню Outline Editor (рис. 86.1).
Рис. 86.1. Добавление атрибутов в режиме Outline Editor не представляет проблем
Редактировать атрибуты в режиме Outline Editor так же легко, как и добавлять их. Например, атрибут LONGDESC может использоваться для добавления к изображениям дополнительных функций доступа, но в палитре Inspector при использовании режима Layout Editor отсутствует соответствующее поле. Outline Editor позволяет добавлять и редактировать атрибуты, которые используются реже и недоступны в палитре Inspector (рис. 86.2).
Рис. 86.2. Вы можете редактировать и добавлять редко использующиеся атрибуты
ГЛАВА 4
04_GoLive_T&T_(101-144)_rus.indd 116
Сложное редактирование страниц
19.01.2006 21:51:20
СОВЕТ
87
Поиск ошибок на странице с помощью режима Outline Editor
117
Если вы видите красный символ ошибки в столбце Status для страницы в окне Site, вероятно, страница содержит разорванную ссылку или пропущенное изображение, которые нужно исправить. Откройте страницу с ошибкой, убедитесь в том, что на панели инструментов активна опция Link Warnings, ошибки будут выделены красным цветом. Однако бывает так, что найти ошибки оказывается непростой задачей. Допустим, что страница содержит разорванную ссылку на удаленную таблицу стилей, устаревший компонент или отсутствующее изображение GIF, которое очень трудно заметить в режиме Layout Editor. Переключитесь в режим Outline Editor и щелкните по значку Link Warnings на панели инструментов. Подобные ошибки будут выделены в структуре документа (рис. 87.1). После того, как вы нашли ошибку, можно исправить ее в Outline Editor, либо переключиться в режим Layout Editor или Source Code Editor и выполнить коррекцию там.
Рис. 87.1. Чтобы выделить ошибки, активируйте функцию Link Warnings в режиме Outline Editor
СОВЕТ 87: Поиск ошибок на странице с помощью режима Outline Editor
04_GoLive_T&T_(101-144)_rus.indd 117
19.01.2006 21:51:20
118 СОВЕТ
88
Добавление отсутствующих конечных тэгов в режиме Outline Editor
Выполняя проверку с помощью функции Syntax Checker (см. Совет 84), чтобы протестировать исходный код, вы можете увидеть предупреждение с информацией о том, что конечный тэг элемента отсутствует (рис. 88.1). Это означает, что у открывающего тэга пары, например, таблицы, мультимедиа объекта или слоя отсутствует необходимый конечный тэг. Некоторым элементам, например, тэгам и <meta> не нужен конечный тэг, но они являются исключениями из правила.
Рис. 88.1. Функция Syntax Checker предупреждает вас об отсутствии конечных тэгов
Если вам необходимо исправить ошибку отсутствия конечного тэга, переключитесь в режим Outline Editor. Вы можете выполнить Ctrl+щелчок (Mac) или щелчок правой кнопкой мыши (Windows) на элементе и выбрать в контекстном меню пункт Binary (Парный), чтобы добавить к элементу конечный тэг в Outline Editor (рис. 88.2).
Рис. 88.2. Чтобы добавить конечный тэг, выберите в контекстном меню пункт Binary
Можно также воспользоваться значком Toggle Binary (Добавить конечный тэг) на панели инструментов. Программа GoLive способна самостоятельно определить место на странице, куда следует поместить конечный тэг двойной пары.
ГЛАВА 4
04_GoLive_T&T_(101-144)_rus.indd 118
Сложное редактирование страниц
19.01.2006 21:51:20
119 СОВЕТ
89
Просмотр изображений в режиме Outline Editor
Outline Editor – очень удобный инструмент для управления и редактирования исходного кода. В данном режиме редактирования также можно просматривать изображения. Если вы пытаетесь выделить и отредактировать определенное изображение или кнопку на панели навигации, окно просмотра в Outline Editor поможет удостовериться в том, что вы не допустили ошибки. По умолчанию, изображения отключаются в режиме Outline Editor, но можно активировать их одним щелчком мыши. Переключитесь в Outline Editor и откройте палитру View из меню Window. Затем выберите опцию Images на палитре View, и вы сможете увидеть все изображения в натуральную величину в Outline Editor (рис. 89.1).
Выберите другой рисунок Что делать, если вы хотите использовать другое изображение? Откройте атрибуты и щелкните по стрелке справа от атрибута <src>. Откроется диалоговое окно, которое позволяет выбрать другое изображение (рис. 89.2).
Рис. 89.1. Используйте палитру View, чтобы активировать изображения в режиме Outline Editor
Рис. 89.2. Щелкните по стрелке в режиме Outline Editor, чтобы открыть диалоговое окно, которое позволяет найти изображение (см. примечание)
СОВЕТ 89: Просмотр изображений в режиме Outline Editor
04_GoLive_T&T_(101-144)_rus.indd 119
19.01.2006 21:51:20
120 СОВЕТ
90
Разворачиваем и сворачиваем режим Outline Editor
Outline Editor является одним из наших любимых режимов в программе GoLive. Если вы часто работаете с ним, то заметите, что он требует выполнять много действий с мышью. Вы можете выполнить большинство действий и с клавиатуры: • Unfold/Collapse Selected Element (Развернуть/свернуть выбранный элемент). Выберите элемент и нажмите клавишу Return/Enter, чтобы развернуть или свернуть элемент (рис. 90.1);
Рис. 90.1. Свернутый элемент (вверху), развернутый элемент (внизу)
• Unfold/Collapse Selected Element Recursively (Развернуть/ свернуть выбранный элемент рекурсивно). Выберите элемент и нажмите клавиши Option+Return (Mac) или Shift+Enter (Windows), как показано на рис. 90.2;
ГЛАВА 4
04_GoLive_T&T_(101-144)_rus.indd 120
Сложное редактирование страниц
19.01.2006 21:51:20
121
Автоматически отобразить все содержимое Чтобы автоматически отобразить все элементы структуры, удерживайте нажатой клавишу Option (Mac) или Alt (Windows) во время переключения в режим Outline Editor из другого режима редактирования.
Рис. 90.2. Элемент, развернутый рекурсивно
• Unfold/Collapse Attributes of Selected Element (Развернуть/ свернуть атрибуты выбранного элемента). Выберите элемент и нажмите клавишу Return (Mac) или Enter (на цифровой клавиатуре в среде Windows); • Unfold/Collapse Attributes of Selected Element Recursively (Развернуть/свернуть атрибуты выбранного элемента рекурсивно). Выберите элемент и нажмите клавиши Option+Return (Mac) или Shift+Enter (на цифровой клавиатуре в среде Windows). Можно также переходить от одного элемента к другому с помощью клавиатуры. Используйте клавиши со стрелками, чтобы перемещаться вверх и вниз по структуре; нажимайте клавишу Tab для перехода к следующему текстовому полю.
СОВЕТ 90: Разворачиваем и сворачиваем режим Outline Editor
04_GoLive_T&T_(101-144)_rus.indd 121
19.01.2006 21:51:20
122 СОВЕТ
91 Палитра Markup В GoLive CS2 появилась новая палитра, Markup (Разметка). Эта палитра позволяет применять к элементу такие атрибуты, как ID, Class, Title и Language. Также она дает возможность быстрой настройки JavaScript для элемента. Данная палитра функционирует в режимах Outline Editor и Layout Editor.
Отображение информации об атрибутах Name и ID в режиме Outline Editor
Если вы часто используете JavaScript или CSS на ваших страницах, вы знакомы с атрибутами Name (Имя) и ID (Идентификатор), которые могут быть применены к объектам. Если вы привязываете атрибут Name или ID к объекту, это упростит его редактирование с использованием JavaScript или CSS. При работе в режиме Layout Editor или Outline Editor используйте вкладку Basic палитры Inspector, чтобы добавить атрибуты к выбранному объекту. Чтобы отобразить Name, ID или другой атрибут объекта в режиме Outline Editor, выберите опцию Attributes в палитре View (рис. 91.1). Теперь вы будете видеть справа от структуры столбец, который показывает все идентифицированные объекты.
Рис. 91.1. ID и другие атрибуты активированы в палитре View и указаны в списке справа в режиме Outline Editor
Большинство объектов могут иметь атрибуты Name или ID, но только немногие объекты включают формы, элементы форм, изображения или DIV для слоев CSS. Если вам трудно найти все объекты, нажмите кнопку Reveal Elements (Отобразить элементы) в палитре View (рис. 91.2). Будут отображены и выделены все объекты с атрибутами Name или ID в структуре документа. Также вы можете переключиться в режим Attribute Flat Mode (Режим однородных атрибутов). Эта опция изменяет режим отображения атрибутов на однородный.
Рис. 91.2. Нажмите кнопку Reveal Elements, чтобы отобразить все объекты
ГЛАВА 4
04_GoLive_T&T_(101-144)_rus.indd 122
Сложное редактирование страниц
19.01.2006 21:51:20
123 СОВЕТ
92
Просмотр веб-страниц в программе GoLive
При создании сайта в GoLive может понадобиться просмотреть страницу без выхода из программы. Вы можете сделать это с помощью вкладки Preview (Предварительный просмотр). Данная вкладка использует встроенную версию браузера Opera; так как именно этот браузер поддерживает режим Preview, можно не только просматривать страницу, но и тестировать ее ссылки в JavaScript (рис. 92.1).
Рис. 92.1. Для тестирования ссылок и элементов JavaScript используйте режим Preview
Чтобы просмотреть страницу, нажмите кнопку Preview в верхней части окна документа. Даже если вы перешли на другую страницу и выполняете проверку ссылок, при переключении в режим редактирования вы вернетесь на оригинальную страницу. Если вы часто работаете в режиме Preview, вы можете добавить комбинацию клавиш для команды меню View Document Mode Preview.
Обновление движка визуализации На ынке регулярно появляются новые версии браузера Opera; программа GoLive позволяет обновлять встроенный браузер. Добавьте новую версию в список Browser Preferences (Настройка браузера) (см. Совет 3), и движок визуализации будет обновляться автоматически. Чтобы выбрать версию Opera для движка визуализации, нажмите переключатель справа от названия браузера. Иногда обновления программы могут привести к конфликтам. Если вы столкнулись с подобной проблемой, просто удалите новый браузер из списка браузеров предварительного просмотра.
СОВЕТ 92: Просмотр веб-страниц в программе GoLive
04_GoLive_T&T_(101-144)_rus.indd 123
19.01.2006 21:51:20
124 СОВЕТ
93 Что там? Вы хотите просмотреть страницы, но не открывать их по отдельности? Нет проблем. Откройте окно Site, выберите страницу в списке Files и откройте окно Live Rendering. Чтобы загрузить другую страницу , выберите соответствующий файл в списке Files. Таким способом вы можете просматривать любые шаблоны и компоненты.
Визуализация с использованием функции Live Rendering
Если вы когда-либо хотели редактировать страницу в одном режиме, а просматривать обновление в другом окне, то вы по достоинству оцените окно Live Rendering (Визуализация в реальном времени). Чтобы открыть окно Live Rendering, выберите команду File Preview In Live Rendering или нажмите клавиши Command+T в среде Mac (Ctrl+T в среде Windows). Страница, которую вы открыли, загрузится в окне Live Rendering. Как и режим Preview, окно Live Rendering представляет собой встроенный веб-браузер, который можно использовать для тестирования ссылок страниц, навигации и JavaScript. В окне Live Rendering имеются четыре команды, которые выполняют следующие задачи: • Load (Загрузка). Вызывает диалоговое диалоговое окно Browse, позволяющее открыть страницу с вашего жесткого диска. Кнопка Browse (напоминает папку) выполняет аналогичную функцию; • Reload (Перезагрузка). Если функция AutoUpdate выключена, эта опция обновляет страницу; • AutoUpdate (Автоматическое обновление). Обновляет изменения в окне Live Rendering; • Bound (Граница). Размещает открытую страницу строго в окне Live Rendering. Можно открыть сразу несколько окон Live Rendering, что может оказаться особенно увлекательным, если вы работаете на нескольких мониторах. Используя инструмент Fetch URL в окне Live Rendering, вы можете быстро привязать окно к странице на вкладке Files в окне Site. Новое добавление в окне Live Rendering – это небольшая кнопка Small Screen Rendering/SSR (Визуализация на маленьком экране). Если вы нажмете эту кнопку, страница будет визуализирована так же, как если бы вы просматривали ее на экране мобильного устройства. Чтобы выйти из SSR, повторно нажмите кнопку. Вы можете также открывать SSR из меню, выбирая команду File Preview in Small Screen Rendering (рис. 93.1).
ГЛАВА 4
04_GoLive_T&T_(101-144)_rus.indd 124
Сложное редактирование страниц
19.01.2006 21:51:21
125
Поиск в сети Internet и просмотр файлов Если вы введете URL-адрес в поле Address окна Live Rendering, то сможете получить доступ в сеть Internet как и при работе в обычном браузере. Выполните Ctrl+щелчок или щелчок правой кнопкой мыши в окне, чтобы открыть такие опции, как Back (Назад), Forward (Вперед), Stop (Стоп), Home (Домой), Copy Address (Скопировать адрес) и Send Link in Email (Отправить ссылку по электронной почте).
Рис. 93.1. Здесь вы видите окно Live Rendering и окно Small Screen Rendering (впереди) с одной и той же загруженной страницей
СОВЕТ 93: Визуализация с использованием функции Live Rendering
04_GoLive_T&T_(101-144)_rus.indd 125
19.01.2006 21:51:21
126 СОВЕТ
94 Просмотр страницы в браузере без программы GoLive Чтобы просмотреть страницу в браузере, не открывая ее предварительно в программе GoLive, выберите страницу в списке Files и нажмите кнопку Preview in Browser на панели инструментов.
Просмотр страниц в веб-браузерах
Чтобы добиться оптимального результата при создании вебсайта, необходимо проверить страницы в нескольких веб-браузерах. В Совете 3 мы показали, как настроить параметры предварительного просмотра браузера. В этом Совете поговорим о том, как вызвать команду Preview in Browser (Просмотреть в браузере) . Кнопка Preview in Browser находится на главной панели инструментов, ее можно нажать в любое время . Чтобы просмотреть страницу в браузере, откройте ее и нажмите кнопку Preview in Browser. Откроется браузер, который настроен как браузер по умолчанию в разделе Browser Preferences (Настройки браузера). Если вы используете дополнительные браузеры, вы можете их выбрать в ниспадающем списке, который открывается после нажатия кнопки Preview in Browser (рис. 94.1).
Рис. 94.1. Кнопка Preview in Browser имеет подменю, которое появится, если вы удержите кнопку
Совет При первом нажатии кнопки Preview in Browser программа GoLive попросит выбрать браузер по умолчанию (если вы еще этого не сделали в окне настройки параметров). Браузер по умолчанию назначается с помощью поля флажка рядом с названием браузера в разделе Browser Preferences. Если вы выбрали несколько браузеров, при нажатии кнопки Preview in Browser они откроются одновременно.
Также для запуска браузера по умолчанию вы можете нажать клавиши Shift+Command+T (Mac) или Shift+Ctrl+T (Windows) или выбрать пункты меню File Preview In Default Browser (Браузер по умолчанию).
ГЛАВА 4
04_GoLive_T&T_(101-144)_rus.indd 126
Сложное редактирование страниц
19.01.2006 21:51:21
127 СОВЕТ
95
Экспорт веб-страниц в формат PDF
Режим PDF Preview (Просмотр в формате PDF) позволяет конвертировать любую веб-страницу в формат PDF; данная функция становится все более мощной с выходом новых версий программы GoLive. Если вы не умеете конвертировать вебстраницы в формат PDF, вам будет не совсем понятно, зачем это нужно делать. Приведем ряд возможных причин: • подготовка страницы для демонстрации клиенту, коллеге или редактору. Намного легче отправить по электронной почте один документ PDF, чем загрузить его на сервер или долго объяснять, как разархивировать файл.sit или .zip. Используя бесплатную программу Adobe Reader (www.adobe.com/reader), любой пользователь может просмотреть файл в формате PDF; • создание версии для печати. Если вы хотите предложить посетителям версию страницы для печати и не беспокоиться о настройках браузеров и принтеров, используйте формат PDF; • архивирование структуры страницы. Это необходимо делать перед тем, как передавать сайт клиентам, которые будут его изменять. Скорее всего, ваш макет перестанет существовать, но вы можете его сохранить в формате PDF. Вы можете без труда конвертировать веб-страницы в формат PDF с помощью программы GoLive. Просто переключитесь в режим PDF Preview и щелкните по значку Export as Adobe PDF (Экспортировать в формат Adobe PDF) на панели инструментов (рис. 95.1).
Печать файла PDF Можно печатать PDFфайлы из программы GoLive без запуска Adobe Acrobat или Adobe Reader. Дважды щелкните по PDFфайлу в окне Site, чтобы открыть его в программе GoLive, и щелкните по значку Print PDF (Распечатать PDF) на панели инструментов.
Полезные значки Для изменения страницы, режима просмотра, вращения и масштаба файла используйте значки в нижней части окна PDF Preview.
Рис. 95.1. Экспортируйте страницу в формат Adobe PDF или отправляйте ее по электронной почте с помощью одного щелчка мыши
СОВЕТ 95: Экспорт веб-страниц в формат PDF
04_GoLive_T&T_(101-144)_rus.indd 127
19.01.2006 21:51:21
128 СОВЕТ
96
Настройка параметров файла формата PDF
Если вы часто используете режим PDF Preview для конвертирования веб-страниц в формат PDF, придется снова и снова изменять одни и те же параметры. Чтобы сэкономить свое время, можно изменить настройки, которые используются при создании PDF-файлов. Выполните команду GoLive Preferences (Mac) или Edit Preferences (Windows) и выберите раздел Adobe PDF слева. Щелкните по символу в виде треугольника (Mac) или плюса (Windows) рядом с опцией Adobe PDF, чтобы раскрыть все категории параметров (рис. 96.1).
Рис. 96.1. Воспользуйтесь этими настройками, чтобы изменить параметры конвертирования и открытия PDFфайлов в программе GoLive
Измените настройки, которые будут влиять на все PDF-файлы, созданные вами в GoLive. Стандартные настройки находятся в верхней части окна и включают набор параметров по умолчанию, размер страницы по умолчанию, а также оптимизацию режима Fast Web View (например, загрузку PDF-файла с вебсервера). Можно также управлять масштабом изображения и настройками файлов PDF, которые вы открываете в GoLive. Обратите внимание на функции сглаживания текста, графики и изображений, но помните о том, что эти функции влияют только на просмотр файла в GoLive, а не на сам PDF-файл.
ГЛАВА 4
04_GoLive_T&T_(101-144)_rus.indd 128
Сложное редактирование страниц
19.01.2006 21:51:21
129 СОВЕТ
97
Использование функции PDF Presets
Не все PDF-файлы похожи друг на друга. Существует огромное количество параметров, которые используются при создании PDF-файлов; программа GoLive предоставляет доступ к этим параметрам с помощью функции PDF Presets (Предустановки PDF). Выполните команду Edit Adobe PDF Presets, и вы увидите диалоговое окно Adobe PDF Presets (рис. 97.1).
Рис. 97.1. В диалоговом окне Adobe PDF Presets можно создавать и редактировать настройки конвертирования в формат PDF
Нажмите кнопку New, чтобы создать новую настройку и ввести ее название. Выберите параметр совместимости в верхнем правом углу диалогового окна. Затем выберите настройки в категориях General (Общие), Compression (Компрессия файлов), HTML Conversion (Преобразование HTML) и Advanced (Дополнительно) слева (рис. 97.2).
Рис. 97.2. Для настройки параметров используйте экранные подсказки
СОВЕТ 97: Использование функции PDF Presets
04_GoLive_T&T_(101-144)_rus.indd 129
19.01.2006 21:51:21
130 Повторное создание PDF-файла с использованием новых настроек Если вы переключаетесь между различными предустановками PDF Presets в палитре Inspector, вы можете заметить, что автоматически ничего не изменяется. Чтобы обновить PDF-файл с использованием новой опции или других настроек, нажмите кнопку Refresh PDF Preview в палитре Inspector.
Потребовалось бы написать отдельную книгу, чтобы обсудить все параметры конвертирования в формат PDF. Вместо этого рекомендуем использовать экранные подсказки. Поместите курсор мыши на любую настройку в диалоговом окне Adobe PDF Preset, и вы увидите описание данной опции. После завершения редактирования нажмите кнопки OK и Done. Теперь для того чтобы использовать одну из предустановок PDF Presets, откройте веб-страницу в GoLive, переключитесь в режим PDF Preview и выберите настройку в окне PDF Creation Inspector (Инспектор создания файла PDF) (рис. 97.3). Размер PDF-файла показывается в левом нижнем углу, так что вы можете решить, должны вы продолжить изменения или нет.
Рис. 97.3. Для настройки параметров используйте экранные подсказки
Если вы хотите изменить какие-либо параметры выбранной предустановки PDF Preset, например, отредактировать поля страницы или удалить фоновые изображения и цвета, вы можете внести изменения в палитре Inspector и нажать кнопку Refresh PDF Preview (Обновить окно просмотра PDF). Когда вы будете готовы к экспорту PDF-файла, выберите пункты меню File Export HTML as Adobe PDF (HTML-страница как файл Adobe PDF), либо нажмите кнопку Save as PDF (Сохранить в формате на панели инструментов. PDF)
ГЛАВА 4
04_GoLive_T&T_(101-144)_rus.indd 130
Сложное редактирование страниц
19.01.2006 21:51:21
СОВЕТ
98
Изменение размера и полей страницы в PDF-файле
Конвертирование веб-страниц в формат PDF может оказаться проблематичным, если размеры страницы не соответствуют размерам бумаги. Функция PDF Creation Inspector (рис. 98.1) позволяет управлять определенными настройками, влияющими на ориентацию страницы, размеры и поля документа:
131
Обычные настройки принтера Если вы хотите, чтобы посетители веб-сайта загружали и печатали PDF-файлы, необходимо учесть стандартные параметры домашних принтеров. Например, многие струйные и лазерные принтеры не могут печатать на расстоянии в полдюйма от края бумаги. Поэтому советуем изменить поля PDF-документа в соответствии с данными ограничениями.
Рис. 98.1. Измените размеры страницы для PDF-документа в палитре Inspector или в окне PDF Preset
• Paper Size (Размер бумаги). Вы можете выбрать одну из установок по умолчанию; • Orientation (Ориентация). Переключайтесь между опциями Portrait (Книжная) и Landscape (Альбомная); • Margins (Поля). Измените все поля страницы или щелкните по значку Link All Margins (Связать все поля), чтобы автоматически настроить все поля на одинаковое значение; • Shrink Content to Paper Width (Разместить по ширине страницы). Если содержимое страницы не умещается на листе, печать страницы может привести к неудовлетворительным результатам. Мы рекомендуем активировать эту опцию. Это позволит программе GoLive размещать данные по ширине страницы и автоматически изменять поля страницы. Если вы заметили, что приходится снова и снова изменять одни и те же настройки, обратитесь к Совету 97.
СОВЕТ 98: Изменение размера и полей страницы в PDF-файле
04_GoLive_T&T_(101-144)_rus.indd 131
19.01.2006 21:51:21
132 СОВЕТ
99 Редактирование метаданных в PDFфайле Если вы уже выполнили экспорт в формат PDF, но хотите отредактировать метаданные, то при наличии программы Acrobat не нужно создавать новый документ. Откройте PDFфайл в программе Acrobat (не в программе Reader), выполните команду File Document Properties (Параметры документа) и измените поля Title, Author, Subject и Keywords в разделе Description (Описание). Вы можете также отредактировать метаданные PDF-файла в Adobe Bridge: выберите файл в окне Bridge и выполните команду File File Info (Информация о файле).
Добавление метаданных в PDF-файл
Метаданные, например, авторская информация, описания и ключевые слова, позволяют создавать более качественные PDF-файлы, так как: • поисковым серверам легче найти PDF-документ; • PDF-файлом проще управлять с помощью системы или базы данных; • метаданные встроены в PDF-документ, поэтому пользователи знают, кто создавал файл, и какая информация в нем содержится. Использование метаданных в формате PDF по существу делает документ более полезным. Добавлять метаданные в GoLive очень просто. Переключитесь в режим PDF Preview и выберите пункты меню File Export HTML as Adobe PDF (HTML-страница как файл Adobe PDF). Выберите соответствующие установки для файла, затем перейдите в раздел Advanced слева от диалогового окна Export Adobe PDF. Если веб-страница уже имеет удачный заголовок, выберите опцию Use HTML Page Title (Использовать заголовок HTMLстраницы). Если заголовок страницы недостаточно информативен, или вы хотите его изменить, отключите эту опцию и введите другой заголовок в поле Title. Вы можете также ввести новые метаданные в полях Author (Автор), Subject (Тема) и Keywords (Ключевые слова), как показано на рис. 99.1.
Рис. 99.1. Настройте метаданные в разделе Advanced диалогового окна Export Adobe PDF
ГЛАВА 4
04_GoLive_T&T_(101-144)_rus.indd 132
Сложное редактирование страниц
19.01.2006 21:51:22
133 СОВЕТ
100
Скрываем фон страницы в PDF-файле
Веб-страницы с фоновыми изображениями обычно не слишком хорошо выглядят при печати, особенно на черно-белых принтерах. Чтобы уменьшить расход чернил и улучшить внешний вид документа, при создании PDF-файла вы можете выбрать опцию Remove Background (Удалить фон) в палитре Inspector (рис. 100.1).
Рис. 100.1. Чтобы повысить читабельность документа, улучшить его внешний вид при печати и уменьшить размер файла, удалите фон во время конвертирования страницы в формат PDF
Опция Remove Background игнорирует фоновые изображения и цвета для таблиц, ячеек таблицы, слоев и целых страниц. Она даже воздействует на фоновые изображения и цвета, настроенные в CSS. Фон заменяется белым цветом, что позволяет выделить содержание и устранить несоответствия. Только представьте, сколько чернил вы сэкономите, если ваш принтер не будет печатать цветной фон страниц.
СОВЕТ 100: Скрываем фон страницы в PDF-файле
04_GoLive_T&T_(101-144)_rus.indd 133
19.01.2006 21:51:22
134 СОВЕТ
101
Управление разрывами страниц при конвертировании в формат PDF
Когда вы конвертируете веб-страницы в формат PDF, необходимо учитывать, что пользователь может распечатать документ на бумаге. Вы должны настроить веб-страницу для печати. Это означает, что длинные страницы часто приходится разбивать на несколько страниц. Программа GoLive предлагает большое количество средств управления разбивкой страниц (рис. 101.1).
Рис. 101.1. Для управления разбивкой веб-страницы на несколько страниц в формате PDF используйте палитру Inspector
• Using a Single Page Layout (Использование одной страницы). Включите эту опцию в палитре Inspector, и даже действительно длинные страницы (до 200 дюймов) будут конвертированы в формат PDF без разрывов страницы. Отключите эту опцию, если вы хотите конвертировать длинные веб-страницы в несколько страниц в формате PDF; • Breaking Tables (Разрывающиеся таблицы). Включите эту опцию, чтобы позволить HTML-таблицам разделяться по страницам. Если вы хотите, чтобы HTML-таблицы не разбивались между страницами, не активируйте эту опцию; • Breaking Images (Разрывающиеся изображения). Если вас устраивают изображения, которые разрываются между двумя страницами, выберите эту опцию. Обычно мы никогда не выбираем эту опцию, чтобы просматривать каждое изображение на одной странице PDF-документа;
ГЛАВА 4
04_GoLive_T&T_(101-144)_rus.indd 134
Сложное редактирование страниц
19.01.2006 21:51:22
135
• Forcing Page Breaks (Принудительные разрывы страницы). Вы можете создать на веб-странице принудительные разрывы. Переместите примечание из раздела Basic палитры Objects в Layout Editor, где вы хотите создать разрыв. Выберите примечание в режиме Layout Editor и введите GLPDF:PAGEBREAK в палитре Inspector (рис. 101.2). Обратите внимание: визуализация страницы в веб-браузере при этом не изменится; данная опция влияет только на процесс конвертирования страницы в формат PDF в программе GoLive.
Рис. 101.2. Чтобы создать принудительный разрыв страницы при конвертировании в формат PDF, добавьте примечание GLPDF:PAGEBREAK
Использование формата PDF для проверки Если вы используете формат PDF в программе GoLive для демонстрации макета веб-страниц вашим клиентам, советуем применить функцию Single Page Layout. Экспортированный PDFдокумент будет выглядеть как веб-страница, и если вы отправите его по электронной почте из программы Acrobat Professional, любой пользователь Adobe Reader сможет добавить в файл необходимые примечания. Наконец-то вы сможете создать полный цикл проверки веб-страницы.
СОВЕТ 101: Управление разрывами страниц при конвертировании в формат PDF
04_GoLive_T&T_(101-144)_rus.indd 135
19.01.2006 21:51:22
136 СОВЕТ
102 Сохранение настроек безопасности Если вы заметите, что приходится снова и снова использовать одни и те же настройки безопасности, можно сохранить их как постоянные параметры программы. В окне параметров программы выберите раздел Security под опцией Adobe PDF и введите нужные пароли и настройки. Теперь программа GoLive будет использовать один и те же настройки безопасности при экспорте в формат PDF, пока вы не измените параметры или опции в диалоговом окне Export Adobe PDF.
Создание защищенных документов в формате Adobe PDF
Одно из самых больших преимуществ технологии Adobe PDF состоит в том, что PDF-документы можно просматривать практически на любом устройстве. Однако бывает и так, что вы хотите сохранить документы в начальном виде, а также ограничить доступ к определенным файлам. Впервые вы можете экспортировать защищенные PDF-документы из GoLive CS2 и указывать, какие пользователи должны их просматривать. Сначала откройте веб-страницу для конвертирования, переключитесь в режим PDF Preview и выберите команду File Export HTML as Adobe PDF. Настройте все прочие установки экспорта PDF, которые вам нужны, и выберите раздел Security (Безопасность). Чтобы запретить открывать PDF-документ пользователям, которые не имеют специального пароля, выберите опцию Require a Password to Open the Document (Запрашивать пароль на открытие документа) и дважды введите пароль (рис. 102.1). Никто, включая вас, не сможет открывать этот PDF-документ без указанного пароля. Если вы не уверены в том, что вы запомните пароль, запишите его в другом месте или создайте резервную копию PDF-документа без пароля.
Рис. 102.1. Настройте параметры безопасности PDF-документа в диалоговом окне Export
Другой интересный способ защиты PDF-документов состоит в том, чтобы разрешить всем пользователям открывать файл, но ограничить некоторые виды доступа. Например, вы можете назначать пароль Permissions (Разрешения), который позволяет пользователям просматривать PDF-файлы, но запрещает печать документов. Вы можете также настраивать защиту таким образом, чтобы пользователи могли открывать PDF-файлы и добавлять комментарии, но не экспортировать любые объекты из PDF-документов. Поэкспериментируйте с различными параметрами, и вы найдете новые интересные возможности.
ГЛАВА 4
04_GoLive_T&T_(101-144)_rus.indd 136
Сложное редактирование страниц
19.01.2006 21:51:22
137 СОВЕТ
103
Работа со ссылками в формате PDF
Программа GoLive позволяет управлять всеми параметрами гиперссылок в PDF-файлах. Независимо от того, был ли PDFдокумент создан в GoLive или другой программе, можно проверять, создавать и редактировать гиперссылки в GoLive.
Проверка ссылок в формате PDF
Экранная подсказка Если вы ненадолго задержите курсор мыши на гиперссылке, то увидите ее адрес в экранной подсказке.
Когда вы конвертируете веб-страницу в формат PDF в программе GoLive, все ее гиперссылки сохраняются. Откройте PDF-файл в GoLive, и вы сможете щелкать по гиперссылкам в режиме PDF Preview (рис. 103.1). Ссылка на локальный PDFфайл или веб-страницу откроет файл в GoLive; ссылка на внешний URL-адрес откроет его в вашем веб-браузере; ссылка на номер PDF-страницы или закладки изменит режим просмотра; ссылка на адрес электронной почты откроет соответствующую программу для работы с электронной почтой.
Рис. 103.1. Для проверки ссылок откройте PDF-файл в программе GoLive
Создание ссылок в формате PDF Вы можете без труда создать новую ссылку в формате PDF, потому что инструменты функционируют так же, как и в других меню GoLive. Откройте PDF-документ в программе GoLove и щелкните по вкладке PDF Link Editing (Редактирование ссылки PDF) в верхней части окна документа. Выберите инструмент New Link (Новая ссылка) на панели инструментов и переместите его в PDFдокумент, чтобы создать новую ссылку. Теперь настройте адрес ссылки в палитре Inspector (рис. 103.2).
СОВЕТ 103: Работа со ссылками в формате PDF
04_GoLive_T&T_(101-144)_rus.indd 137
19.01.2006 21:51:22
138 Изменение цвета при редактировании ссылки По умолчанию для выделения ссылок в PDF-файле используется синий цвет, но вы можете изменить эту настройку в окне параметров. Выберите новый цвет в разделе Document Display (Отображение документа) в параметрах Adobe PDF. Это может быть полезно в случае, если ваш PDFдокумент содержит объекты разного цвета.
Рис. 103.2. Выберите область ссылки в режиме PDF Link Editing и настройте гиперссылку в палитре Inspector
Совет Также для настройки адреса гиперссылки вы можете выполнить Command+щелчок (Mac) или Ctrl+щелчок (Windows) на области в документе.
Создание ссылок из PDF-файла на определенное место Знаете ли вы о том, что вы можете создать гиперссылку на определенную страницу или закладку в PDF-файле, состоящем из нескольких страниц? Выберите область ссылки в режиме PDF Link Editing существующего PDF-документа, укажите документ для ссылки в поле URL палитры Inspector и введите нужную страницу или выберите закладку для ссылки (рис. 103.3). Теперь эта гиперссылка будет открывать связанный PDF-документ и автоматически переключаться на нужную страницу.
Рис. 103.3. Создайте ссылку на PDF-файл и введите номер страницы или выберите название закладки
ГЛАВА 4
04_GoLive_T&T_(101-144)_rus.indd 138
Сложное редактирование страниц
19.01.2006 21:51:22
139
Создание ссылок из HTML-страницы на закладку в PDF Создание ссылок из PDF-документа полезно, но создание ссылок из веб-страниц на PDF-файлы еще более увлекательно. Если вы потратили свое время на создание PDF-файлов со сложным дизайном, поможет функция добавления ссылок в закладки. Создайте ссылку из веб-страницы на PDF-файл и нажмите кнопку Edit PDF Anchor (Редактировать указатель PDF) в палитре Inspector. Теперь в диалоговом окне PDF Anchor Editing вы можете выбрать закладку или номер страницы для ссылки (рис. 103.4). Вы даже можете выбрать, следует ли отображать в PDF-документе вкладку с закладками, вкладку с копиями или просто страницу.
От указателей к закладкам При конвертировании вебстраниц в формат PDF в программе GoLive HTML anchors (HTML-указатель) становятся закладками с названиями.
Рис. 103.4. Создайте ссылку на PDF-документ с закладками и сделайте выбор в списке палитры Inspector
СОВЕТ 103: Работа со ссылками в формате PDF
04_GoLive_T&T_(101-144)_rus.indd 139
19.01.2006 21:51:22
140 СОВЕТ
104 Сохранение эффектов Rollover В GoLive CS2 появилась новая возможность сохранения эффектов JavaScript Rollover (Прокрутка) в качестве эффектов PDF Rollover. Во время экспорта в формат PDF включите функцию Honor Rollover Effects (Сохранять эффекты Rollover).
Встраивание в PDF-документы фильмов и объектов мультимедиа
Когда компания Adobe выпустили Acrobat 6, она включила в программу интересную возможность добавления в PDF-файлы объектов мультимедиа, например, фильмов QuickTime и файлов Flash. Это значит, что теперь файлы Adobe PDF представляют собой контейнеры, которые могут содержать презентации, состоящие из файлов в различных форматах. Большое количество объектов может содержаться в одном файле, который просматривается в бесплатной программе Adobe Reader (www.adobe.com/reader). Если ваши веб-страницы содержат фильмы, вы сможете встроить их в PDF-файлы, создаваемые с использованием функции PDF Export (Экспортировать в формат PDF) программы GoLive. Для правильного конвертирования вы должны включить две опции в разделе General диалогового окна Export Adobe PDF (рис. 104.1):
Рис. 104. Настройте параметры таким образом, чтобы объект мультимедиа оказался встроен в файл PDF 1.5 или 1.6.
• Compatibility (Совместимость). Убедитесь в том, что эта опция настроена, по крайней мере, на PDF 1.5, так как только Acrobat 6 и 7 поддерживают встроенные объекты мультимедиа; • Multimedia (Мультимедиа). Выберите значение Embed All (Встроить все), чтобы встроить в экспортированный файл PDF такие мультимедиа файлы, как QuickTime и SWF. Если вы не выберите эту опцию, мультимедиа объекты смогут функционировать, но вам понадобится постоянно хранить PDF и мультимедиа файлы вместе.
ГЛАВА 4
04_GoLive_T&T_(101-144)_rus.indd 140
Сложное редактирование страниц
19.01.2006 21:51:23
141 СОВЕТ
105
Работа с примечаниями в PDF-документе
В PDF-документе можно добавлять, редактировать и удалять примечания, которыми вы собираетесь обменяться с другими пользователями GoLive, Acrobat и Adobe Reader. Примечания позволяют другим пользователям добавлять свои комментарии непосредственно в PDF-документ.
Добавление примечаний Откройте PDF-файл в программе GoLive и выберите инструмент Comment (Примечание) на панели инструментов. Щелкните по файлу инструментом Comment, чтобы создать в тексте новое примечание. Убедитесь в том, что примечание выбрано, и введите его описание в палитре Inspector (рис. 105.1). Обратите внимание: программа GoLive автоматически записывает дату и время добавления примечания, что упрощает его отслеживание. Когда вы сохраните файл, примечания будут добавлены в PDF-документ.
Примечания отсутствуют? Вы не видите примечаний, которые были добавлены в документ? Откройте файл в программе GoLive и выберите опции Show Annotations (Показывать замечания) и Show Text Annotations (Показывать текстовые замечания) в палитре View.
Рис. 105.1. Воспользуйтесь инструментом Comment и добавьте описание в палитре Inspector
Редактирование примечаний Вы можете просмотреть любое PDF-примечание в программе GoLive и отредактировать описания с помощью палитры Inspector. Выберите примечание в документе и отредактируйте описание. Обратите внимание: дата и время будут изменены соответствующим образом.
Удаление примечаний Чтобы удалить примечание, выберите его в программе GoLive и нажмите клавишу Delete. Если вы совершили ошибку, можно исправить ее с помощью функции Multiple Undo (Многоуровневая отмена действий): нажмите клавиши Command+Z (Mac) или Ctrl+Z (Windows).
СОВЕТ 105: Работа с примечаниями в PDF-документе
04_GoLive_T&T_(101-144)_rus.indd 141
19.01.2006 21:51:23
142 СОВЕТ
106
Конвертирование отдельных страниц
Если вы нашли в сети Internet страницу, которую хотите сохранить в формате, удобном для хранения, поиска, печати и обмена, поможет формат PDF. Если у вас есть программа Acrobat Standard или Acrobat Professional, вы сможете использовать функцию Web Capture (Захват веб-страниц) для конвертирования вебстраниц или веб-сайтов в формат PDF; впрочем, программа GoLive может это сделать автоматически. Сначала выберите пункты меню File Server Download Page (Файл Сервер Загрузить страницу) и введите URL-адрес страницы, которую вы хотите записать (рис. 106.1). Нажмите кнопку Save As (Сохранить как), и программа GoLive загрузит все файлы страницы, а затем соответствующим образом настроит их дизайн.
Рис. 106.1. Сначала загрузите страницу, которую вы хотите конвертировать в формат PDF
После загрузки нужной страницы в программу GoLive переключитесь в режим PDF Preview (рис. 106.2) и нажмите кнопку Save as PDF (Сохранить в формате PDF) на панели инструментов. Файл готов.
Рис. 106.2. Экспортируйте страницу в формат PDF с помощью программы GoLive
ГЛАВА 4
04_GoLive_T&T_(101-144)_rus.indd 142
Сложное редактирование страниц
19.01.2006 21:51:23
143 СОВЕТ
107
Конвертирование веб-сайтов в формат PDF
В течение многих лет программа Adobe Acrobat содержит функцию конвертирования веб-страницы или всего веб-сайта в формат PDF. Теперь и в программе GoLive CS2 вы можете конвертировать веб-сайт в формат PDF с помощью нескольких щелчков мыши, даже не выходя при этом из вашего редактора. Откройте окно Site и выполните команду File Export HTML as Adobe PDF. Диалоговое окно Export выглядит так же, как и окно, о котором мы рассказывали в других разделах главы, за одним исключением: оно содержит раздел Site Creation (Создание сайтов), как показано на рис. 107.1.
Рис. 107.1. Раздел Site Creation в диалоговом окне Export Adobe PDF позволяет создавать PDF-документ из целого веб-сайта
Измените другие настройки PDF-файла и выберите опцию Site Creation слева в диалоговом окне Export. Наверху укажите, хотите ли вы создать один PDF-документ из всех файлов сайта или несколько отдельных документов для всех веб-страниц. Если вы создаете архивные копии или версии веб-страниц для печати, выберите вторую опцию; как правило, чаще всего следует пользоваться опцией Single PDF (Единый PDF-файл). Убедитесь в том, что опция Resolve Links (Разрешить ссылки) была выбрана.
СОВЕТ 107: Конвертирование веб-сайтов в формат PDF
04_GoLive_T&T_(101-144)_rus.indd 143
19.01.2006 21:51:23
144 Запись веб-страниц в программе Adobe Acrobat Если вы хотите конвертировать сайт в формат PDF, но на вашем жестком диске отсутствуют необходимые файлы, воспользуйтесь опцией Web Capture (Захват веб-страниц) в Adobe Acrobat. В программе Acrobat выполните команду File Create PDF From Web Page (Файл Создать PDF-файл Из веб-страницы), выберите опцию Get Entire Site (Загрузить весь сайт) и нажмите кнопку Create (Создать). Если вы уверены в том, что вы хотите загрузить и конвертировать весь сайт в формат PDF, нажмите кнопку Yes, когда вы увидите диалоговое окно Potentially Large Download Confirmation (Подтверждение загрузки большого файла) и дождитесь завершения процесса.
ГЛАВА 4
04_GoLive_T&T_(101-144)_rus.indd 144
Необходимо решить, какие именно файлы вы будете конвертировать. Для этого воспользуйтесь меню Work On (Работать с) в центре диалогового окна. Если перед тем как активировать команду Export, вы выбрали какие-либо файлы в окне Site, можно указать, что необходимо конвертировать только эти файлы. В противном случае, скорее всего, вы будете конвертировать все файлы, находящиеся на вкладке Files или весь сайт (включая шаблоны, подписи и так далее). Сделав выбор, нажмите кнопку Export, и программа GoLive завершит процесс конвертирования.
Сложное редактирование страниц
19.01.2006 21:51:23
145
ГЛАВА 5
Работа с каскадными таблицами стилей Скорее всего, вам известно о том, какое влияние оказывают каскадные таблицы стилей – CSS – на индустрию веб-дизайна. Технология CSS меняет подход дизайнеров ко всему, начиная от стилизации текста и заканчивая настройками доступа. Таблицы стилей экономят время и упрощают изменение дизайна сайтов. Программа GoLive всегда включала передовые технологии веб-дизайна, и таблицы стилей не составляют исключения. В течение нескольких лет программ GoLive поддерживала CSS, а GoLive CS2 включила полную поддержку каскадных таблиц стилей. Разработчики потратили много времени на построение интерфейса, упорядочивание рабочего процесса и добавление поддержки самых последних технологий CSS. Мы уверены, что вы будете приятно удивлены. Если вы все еще не знаете, нужно вам пользоваться технологиями CSS или нет, ознакомьтесь с CSS-презентацией по адресу: www.hotdesign.com/seybold/. Адам Пратт участвовал в создании этой презентации вместе со знатоком CSS, Биллом Мерикаллио (Bill Merikallio) из Seybold Seminars. После изучения презентации возвратитесь к этой главе.
05_GoLive_T&T_(145-172)_rus.indd 145
21.01.2006 1:56:47
146 СОВЕТ
108
Изучаем CSS Editor
CSS Editor (Редактор CSS) в GoLive CS2 имеет несколько впечатляющих функций. Чтобы открыть этот редактор для таблицы стилей на веб-странице, щелкните по значку CSS Editor в верхнем правом углу страницы в режиме Layout Editor, либо щелкните и удержите кнопку мыши, что открыть список связанных CSS-файлов. Если вы предпочитаете работать с новым внешним CSS-файлом, выполните команду File New и выберите файл Basic CSS в категории Favorites (Избранное), либо примените один из шаблонов CSS в категории Web CSS. Когда откроется редактор, слева вы увидите существующие правила, а справа – значки и меню, которые помогут создать новые правила, включая такие мощные функции, как выражения @import. Чтобы создать CSS-правило, щелкните по соответствующему значку справа в окне (рис. 108.1).
Рис. 108.1. Режим по умолчанию для нового CSS Editor. Мы открыли список дополнительных опций
Если вы выберите один из объектов слева (в терминологии CSS эти объекты называются селекторами), редактор отобразит справа восемь вкладок редактирования. Для настройки выбранных правил CSS применяйте параметры стиля на данных вкладках. В левом нижнем углу находятся две кнопки, которые разделяют окно редактора по горизонтали. Щелкните по значку в виде глаза, чтобы отобразить панель Style Preview (Просмотр стиля) и посмотреть, как выглядит данный стиль (рис. 108.2). Вам не придется ни сохранять изменения, ни обновлять файл, ни загружать его. Вы сразу же увидите конечный результат!
ГЛАВА 5
05_GoLive_T&T_(145-172)_rus.indd 146
Работа с каскадными таблицами стилей
21.01.2006 1:56:56
147
Настройка окна предварительного просмотра Если вы хотите увеличить область предварительного просмотра, измените размеры окна или переместите разделитель, который располагается между верхней и нижней частями окна CSS Editor.
Рис. 108.2. Откройте панель Style Preview с помощью значка в виде глаза в левом нижнем углу
Щелкните по значку в виде двойной стрелки, чтобы скрыть или отобразить исходный код для CSS (рис. 108.3). В этом окне будут работать все функции режима Source Code Editor, о которых вы узнали в Советах 77-83 (так как программа GoLive поддерживает постоянные параметры функций для всех режимов).
Рис. 108.3. При работе с таблицами CSS можно использовать режим Source Code Editor программы GoLive
СОВЕТ 108: Изучаем CSS Editor
05_GoLive_T&T_(145-172)_rus.indd 147
21.01.2006 1:56:57
148 СОВЕТ
109 Куда пропал режим просмотра по умолчанию? После отключения режима просмотра для редактора вы задумаетесь о том, как его вернуть. Для этого щелкните по пустому пространству слева в CSS Editor (там, где находится список стилей).
Активация панели кнопок CSS
По умолчанию режим просмотра CSS Editor включает опцию Show These Buttons at Top (Отобразить эти кнопки вверху), как показано на рис. 109.1. Если вы отметите это поле флажка, кнопки будут размещены вдоль верхней границы окна, что упростит доступ к ним в любое время. Вы будете использовать эти кнопки, чтобы создавать новые стили, добавлять папки для стилей и так далее. Рекомендуем включить данную опцию.
Рис. 109.1. Если вы активируете эту опцию, в верхней части окна CSS Editor отобразятся кнопки, которые в режиме просмотра по умолчанию находятся справа
Вы можете нажать кнопку, чтобы создать новый элемент, класс стиль ID, выражение (@) или папку для стилей. В следующем Совете мы расскажем еще об одном предназначении кнопок.
ГЛАВА 5
05_GoLive_T&T_(145-172)_rus.indd 148
Работа с каскадными таблицами стилей
21.01.2006 1:56:57
149 СОВЕТ
110
Использование ниспадающих меню
Независимо от того, являетесь вы новичком или опытным пользователем CSS, вы высоко оцените ниспадающие меню CSS Editor (рис. 110.1). Некоторые значки новых стилей в режиме просмотра по умолчанию для CSS Editor (или в верхней части экрана, если вы изменили настройку, как показано в Совете 109) имеют символы в виде черных треугольников. Эти символы показывают, что, если вы щелкните по значку и удержите кнопку мыши, откроется автоматически заполняемый список опций. Например, если вы щелкните по значку External CSS (Внешние CSS-файлы) или Create @import (Создать правило @import) и удержите кнопку мыши, соответствующие меню будут автоматически заполнены файлами .css из активного сайта. Ниспадающее меню Elements (Элементы) также заполняется стандартными элементами, для которых вы будете создавать CSS-правила.
Настройка меню Elements Чтобы открыть файл настроек, выберите в меню Elements пункт Edit Styles Example (Редактировать пример стилей). Если существует элемент или параметр стиля, который вы хотите использовать постоянно, отредактируйте его здесь, и он будет добавлен в ниспадающее меню.
Рис. 110.1. Ниспадающие меню в редакторе CSS Editor позволяют экономить время при редактировании таблиц CSS
СОВЕТ 110: Использование ниспадающих меню
05_GoLive_T&T_(145-172)_rus.indd 149
21.01.2006 1:56:57
150 СОВЕТ
111 Синие ярлыки При взгляде на вкладки непросто сразу понять, что вы изменили, а что – нет. Ярлыки поля, которое вы изменили для выделенного правила, изменяют цвет с черного на синий. Если синие ярлыки вас раздражают, можно отключить их в плавающем меню CSS Editor с помощью команды View Mark Used Properties (Отмечать параметры, которые были изменены).
Вкладки в CSS Editor
Вы можете редактировать различные параметры и атрибуты стилей CSS, которые разбиты на несколько логических категорий в CSS Editor (рис. 111.1). Рассмотрим их по порядку, слева направо. Блок Поля Текст Границы Шрифт Объект списка Селектор и свойства Фон
Рис. 111.1. CSS Editor включает восемь различных категорий параметров, которые вы можете редактировать для правила CSS
Selector and Properties (Селектор и параметры). Здесь можно изменить селектор и добавить примечание. Вы увидите список активных параметров стиля и сможете добавить новые параметры с помощью значка New Property (Новый параметр). Эта опция обеспечивает совместимость с будущими версиями CSS; Font (Шрифт). Настройте шрифт, размер шрифта, цвет и высоту строки. Помните: посетители сайта смогут увидеть выбранные вами шрифты только в том случае, если они установлены на их компьютерах. Мы советуем ограничить выбор только теми шрифтами, которые присутствуют в этом разделе; Text (Текст). Измените отступ текста, выравнивание и отступы. Также вы можете использовать в тексте прописные или строчные буквы, но учтите, что не все параметры будут правильно визуализированы в режиме Layout Editor. Для визуализации используйте режим Layout Preview;
ГЛАВА 5
05_GoLive_T&T_(145-172)_rus.indd 150
Работа с каскадными таблицами стилей
21.01.2006 1:56:58
151
Block Properties (Параметры блока). Здесь вы можете изменить размер, положение и видимость объекта. Продвинутые пользователи найдут применение параметрам Float (Свободное перемещение) и Clear (Исходное состояние); Margin and Padding (Поля и заполнение). Поле – это пространство между объектом и соседними объектами, а заполнение – это отступ между границей объекта и внутренним содержимым. Когда вы редактируете эти параметры, решите, хотите ли вы использовать одинаковые значения, либо будете изменять поля и заполнение отдельно сверху, справа, снизу и слева;
Редактирование нескольких правил Чтобы одновременно изменить параметры нескольких правил, выберите их в списке слева.
Border and Outline (Граница и структура). Измените толщину, цвет и стиль границ объектов; List Item and Others (Маркеры списка и другие параметры). С помощью параметров в этом разделе вы можете настроить и даже визуализировать маркеры списка; Background (Фон). Настройте цвет или изображение фона объекта, например, для элемента BODY. Вы также можете настроить параметры фоновых изображений.
СОВЕТ 111: Вкладки в CSS Editor
05_GoLive_T&T_(145-172)_rus.indd 151
21.01.2006 1:56:58
152 СОВЕТ
112
Использование списка Properties в CSS Editor
Все параметры стилей выбранного правила приведены в списке на первой вкладке редактора CSS Editor, что позволяет быстро просмотреть информацию по правилу. Если вас устраивает работа с CSS, можно добавить любой параметр с помощью значка New Property (введите название параметра и выберите нужные атрибуты). Продвинутый пользователь может добавить и отредактировать все параметры стиля в этом списке, а не переключаться между различными вкладками. Даже если вы умеете писать код вручную, список Properties сэкономит ваше время и позволит минимизировать количество ошибок. Если вы щелкните по значку New Property и удержите кнопку мыши, вы сможете сделать выбор в списке, которые содержит все доступные параметры CSS. Список настолько велик, что он не может уместиться на одном экране (рис. 112.1).
Рис. 112.1. Список New Property содержит все доступные параметры CSS
Чтобы удалить параметр из правила CSS, выберите его в этом списке и щелкните по значку с изображением корзины. Этот метод намного проще, чем поиск параметров на различных вкладках. Чтобы удалить несколько параметров, выберите их с помощью клавиши Shift и щелкните по значку с изображением корзины. В списке Properties имеется еще одна функция, которая позволяет сохранять и загружать коллекции параметров. Допустим, что вы имеете элемент с большим количеством параметров и хотите настроить другой элемент аналогичным образом. Выберите элемент и нажмите кнопку Store Property Collection (Сохранить коллекцию параметров) , чтобы сохранить параметры в виде коллекции. Чтобы применить коллекцию к другому элементу, нажмите кнопку Apply Property Collection (Применить коллекцию параметров) и выберите название коллекции в списке.
ГЛАВА 5
05_GoLive_T&T_(145-172)_rus.indd 152
Работа с каскадными таблицами стилей
21.01.2006 1:56:58
153 СОВЕТ
113
Сортировка стилей
Вы можете заметить, что ваша таблица стилей стала очень длинной. Чтобы быстро найти стили в списке, можно использовать команду Sort Statements (Сортировать выражения), которая находится в плавающем меню редактора CSS Editor, а также в контекстном меню. Выберите команду для сортировки выражений в алфавитном порядке по группам: сначала элементы, затем классы и, наконец, идентификаторы (рис. 113.1).
Рис. 113.1. Если вы хотите отсортировать элементы в таблице стилей, воспользуйтесь командой Sort Statements. Здесь представлен список до (слева) и после (справа) сортировки
СОВЕТ 113: Сортировка стилей
05_GoLive_T&T_(145-172)_rus.indd 153
21.01.2006 1:56:59
154 СОВЕТ
114 Мне нужно все, кроме этого В ниспадающем меню функции Quicksearch вы найдете дополнительную команду , Invert (Инвертировать). Если для поиска объекта вы используете функцию Quicksearch, можно воспользоваться этой командой, чтобы увидеть все, кроме того, что вы искали! Это только небольшой пример, который показывает, какими мощными возможностями обладает CSS Editor в программе GoLive.
Поиск правил CSS с помощью функции Quicksearch
CSS Editor, как и окно Site, содержит новый инструмент, который называется Quicksearch (Быстрый поиск). Данный инструмент располагается в верхнем правом углу редактора и используется для быстрого поиска выражений, селекторов или описаний в CSS-документе. Чтобы найти объект, начните вводить его название в поле Quicksearch. Программа GoLive идентифицирует объекты и отобразит их список в окне редактора. Чтобы очистить поле ввода, щелкните по символу справа (не удивляйтесь, если вы не видите этот символ; он появится только после того, как вы введете что-либо в поле). Функция Quicksearch в программе GoLive тоже имеет свое ниспадающее меню (рис. 114.1), которое позволяет выделить группу объектов для таблицы стилей.
Рис. 114.1. Используя функцию Quicksearch, вы без труда можете выделить выражения или селекторы в сложной таблице стилей
ГЛАВА 5
05_GoLive_T&T_(145-172)_rus.indd 154
Работа с каскадными таблицами стилей
21.01.2006 1:56:59
155 СОВЕТ
115
Переход к параметрам CSS
Если вы используете стили с различными параметрами, запомнить, какая вкладка редактора содержит какие определения, будет непросто. Это значит, что, если вы хотите изменить определение стиля, вам часто приходится щелкать по всем вкладкам. В GoLive CS2 имеется удобная функция, которая поможет этого избежать. Справа от названия любого стиля в списке, в столбце Info (Информация) имеются значки, соответствующие вкладкам в CSS Editor, на которых указаны данные параметры. Если вы не видите эти значки, переместите нижний правый угол редактора CSS Editor, как показано на рис. 115.1.
Рис. 115.1. Если вы увеличите окно CSS Editor, на экране отобразятся значки, соответствующие вкладкам, на которых настроены параметры
Отобразить параметры в списке Чтобы получить доступ к настроенным параметрам из списка стилей, выберите в плавающем меню редактора опцию Show Properties in List (Отобразить параметры в виде списка). Чтобы просмотреть параметры, щелкните по серому треугольнику слева от названия стиля в среде Mac (или по символу в виде плюса в среде Windows). Также вы можете щелкнуть по значку рядом с названием параметра в списке, чтобы перейти на нужную вкладку.
Теперь для перехода на необходимую вкладку достаточно просто щелкнуть по значку. Редактор перейдет на вкладку и отобразит параметры (рис. 115.2).
Рис. 115.2. Щелкните по значку, чтобы перейти на нужную вкладку в CSS Editor
СОВЕТ 115: Переход к параметрам CSS
05_GoLive_T&T_(145-172)_rus.indd 155
21.01.2006 1:56:59
156 СОВЕТ
116 Перемещаем правила, чтобы отсортировать выражения
Создание примечаний и папок CSS
Когда вы создаете сложные CSS-файлы, понадобится организовать правила таким образом, чтобы упростить их запоминание, управление правилами и обмен с другими пользователями. Это можно сделать с помощью дополнительных примечаний и параметров папок в CSS Editor (рис. 116.1.).
Чтобы изменить порядок CSS-правил, либо удалить их из папок, выберите правила и переместите их в списке слева от окна CSS Editor.
Рис. 116.1. Примечания и папки позволяют организовать сложные CSS-файлы
Создайте примечание в исходном CSS-коде, чтобы сохранить напоминание, задокументировать вашу работу или отправить стандарты стилей своим коллегам. Нажмите кнопку Create Comment (Создать примечание) справа или в верхней части редактора. Введите текст примечания справа в окне. В любое время вы можете вернуться и отредактировать или удалить примечания. Также вы можете создавать папки для сложных таблиц стилей. Папки представляют собой примечания в исходном коде, которые выглядят как папки в списке определений CSS и никак не изменяют сам код. Чтобы создать новую папку, щелкните по значку New Folder (Новая папка) справа или в верхней части редактора CSS Editor. Помните о том, что порядок папок не влияет на порядок таблицы стилей.
ГЛАВА 5
05_GoLive_T&T_(145-172)_rus.indd 156
Работа с каскадными таблицами стилей
21.01.2006 1:56:59
157 СОВЕТ
117
Использование вкладки CSS в окне Site
По мере того как применение таблиц стилей веб-мастерам становится все более и более сложным, управление всеми внешними CSS-файлами и различными CSS-правилами приобретает все большее значение. Программа GoLive CS2 предлагает новый способ управления параметрами CSS в одном окне: это вкладка CSS в окне Site (рис. 117.1).
Выполняйте обновления Если вы выполняете сложное CSS-редактирование, нажмите кнопку Refresh (Обновить) на панели инструментов, чтобы убедиться в том, что вы работаете с последней информацией.
Рис. 117.1. Управляйте всеми параметрами CSS на новой вкладке CSS в окне Site
На новой вкладке CSS вы увидите список всех внешних .css файлов, а также классов и ID-стилей, которые были указаны или использованы на страницах сайта. Вы можете заметить, что стили Element отсутствуют в списке; это вызвано тем, что данные стили используются автоматически, вы можете их изменять только путем редактирования правил в CSS Editor. Вы даже можете увидеть, сколько раз был настроен данный стиль, и сколько раз он был применен на страницах сайта. Это поможет избежать ненужного копирования и повысить эффективность использования стилей. Если необходимо внести изменения в CSS-правило, выберите его на вкладке CSS в окне Site и найдите соответствующее указание в палитре Inspector. Помните: один и тот же стиль может быть настроен в разных местах, но в большинстве случаев у него есть только один источник. Чтобы открыть стиль, дважды щелкните по файлу, в котором он указан; выделенное правило будет автоматически выбрано в исходном документе. Теперь осталось только отредактировать CSS-правило и сохранить файл.
СОВЕТ 117: Использование вкладки CSS в окне Site
05_GoLive_T&T_(145-172)_rus.indd 157
21.01.2006 1:57:00
158 СОВЕТ
118
Отслеживание CSS-правил с помощью палитры In & Out Links
Возможность отслеживания всех CSS-определений на вкладке CSS в окне Site очень удобна. Однако эта функция становится еще более ценной благодаря тому, что вы можете управлять и обновлять все CSS-правила из одного меню. Например, выберите внешний CSS-файл на вкладке CSS в окне Site и откройте палитру In & Out Links (Внешние и внутренние ссылки) из меню Window. Слева появятся страницы, которые ссылаются на выбранный CSS-файл, а справа вы увидите список классов и ID-стилей, содержащихся в данном файле (рис. 118.1).
Рис. 118.1. Чтобы получить сведения об использовании стилей на сайте, выберите файл .css и откройте палитру In & Out Links
ГЛАВА 5
05_GoLive_T&T_(145-172)_rus.indd 158
Работа с каскадными таблицами стилей
21.01.2006 1:57:00
159
Чтобы получить дополнительные сведения, выберите один из классов или ID-стилей справа. Слева в палитре In & Out Links вы увидите, где именно был настроен данный стиль, а справа отобразится список всех файлов, которые его используют (рис. 118.2).
Рис. 118.2. Выберите один стиль, чтобы увидеть список всех файлов, которые его используют
Сейчас вы можете заменить один класс другим. Раньше для этого приходилось редактировать все страницы вручную или использовать функцию Find and Replace (Найти и заменить). В GoLive CS2 достаточно выбрать страницу для обновления и применить инструмент Pick Whip (Выбор) из палитры In & Out Links (рис. 118.3). Справа найдите стиль, который вы хотите заменить и перенаправьте ссылку на новый стиль на вкладке CSS в окне Site.
Рис. 118.3. С помощью палитры In & Out Links можно изменить настройки CSS-стилей
СОВЕТ 118: Отслеживание CSS-правил с помощью палитры In & Out Links
05_GoLive_T&T_(145-172)_rus.indd 159
21.01.2006 1:57:00
160 СОВЕТ
119 Комбинация клавиш Также вы можете выполнить Ctrl+щелчок (Mac) или щелчок правой кнопкой мыши (Windows) и выбрать команду Default CSS, чтобы указать CSSфайл по умолчанию для сайта.
Создание файла CSS по умолчанию для веб-сайта
Одно из важных преимуществ CSS – это постоянство дизайна и форматирования текста, которое таблицы стилей обеспечивают для веб-сайта. Этого довольно просто достичь, если вы будете помнить о том, что необходимо использовать один CSSфайл для всех страниц. Программа GoLive CS2 содержит новую функцию, которая позволяет указать внешний CSS-файл для каждого веб-сайта. Это значит, что каждый раз, когда вы создаете новую страницу на сайте, программа GoLive автоматически привязывает к ней CSS-файл по умолчанию. Именно такие приятные мелочи делают программу GoLive очень эффективной. Выберите файл .css на вкладке Files в окне Site и щелкните по опции Default CSS (CSS-файл по умолчанию) в разделе Page (Страница) палитры Inspector (рис. 119.1). Обратите внимание: теперь CSS-файл по умолчанию выделен на вкладке Files полужирным шрифтом, как и домашняя страница сайта.
Рис. 119.1. С помощью палитры Inspector можно настроить для сайта CSS-файл по умолчанию
Существует три способа создания новой страницы сайта, которые используют CSS-файл по умолчанию: • выполните Ctrl+щелчок (Mac) или щелчок правой кнопкой мыши (Windows) на вкладке Files в окне Site и выберите пункты меню New Document; • нажмите кнопку New Page (Новая страница) инструментов;
на панели
• переместите объект Generic Page (Общая страница) из раздела Site палитры Objects. Таким образом, вы не сможете ошибочно привязать к странице сайта не тот CSS-файл. Эта функция экономит время и позволяет добиться постоянства дизайна на сайте.
ГЛАВА 5
05_GoLive_T&T_(145-172)_rus.indd 160
Работа с каскадными таблицами стилей
21.01.2006 1:57:00
161 СОВЕТ
120
Применение CSS-стилей
Стили Element, например, ,
и применяются автоматически к каждому стилизованному элементу, но стили классов и ID необходимо добавлять вручную. Вы можете добавить CSS-классы с помощью команд Type CSS Span (CSS-интервал), Type CSS Paragraph (CSS-параграф) или Type CSS Div ; самый простой способ – это команда Type CSS Style (CSS-стиль). Когда вы вызовете эту команду, в режиме Layout Editor появится небольшое плавающее окно; с помощью одного щелчка мыши вы можете применить класс в качестве встроенного стиля, блока или активного HTML-элемента (рис. 120.1).
Рис. 120.1. В этом плавающем окне палитры CSS можно применить CSS-классы с помощью одного щелчка мыши
Также для применения CSS-классов можно открыть палитру CSS из меню Window и щелкнуть в столбце рядом с нужным классом. Если CSS Editor еще открыт, вы можете даже перемещать классы из окна редактора в выделенную область режима Layout Editor.
СОВЕТ 120: Применение CSS-стилей
05_GoLive_T&T_(145-172)_rus.indd 161
21.01.2006 1:57:01
162 Курица и яйцо Что произойдет, если вы захотите применить класс, который еще не создан? Сделайте выбор в режиме Layout Editor и щелкните по соответствующему столбцу рядом с объектом New Generic в палитре CSS. При этом будет создан новый стиль, которому будет присвоено название; затем стиль будет применен. Отредактируйте параметры нового класса в окне CSS Editor, которое откроется автоматически.
Чтобы применить ID-стиль, выберите элемент на дереве разметки в нижней части окна документа (за информацией о дереве разметки обратитесь к Совету 34), выполните Ctrl+щелчок (Mac) или щелчок правой кнопкой мыши (Windows) на выбранном элементе и выберите ID в подменю Apply ID (Применить ID). См. рис. 120.2. Помните, что вы можете применить ID на странице только один раз.
Рис. 120.2. Вы можете добавлять ID-стиль с помощью дерева разметки и контекстных меню
ГЛАВА 5
05_GoLive_T&T_(145-172)_rus.indd 162
Работа с каскадными таблицами стилей
21.01.2006 1:57:01
163 СОВЕТ
121
Просмотр CSS-стилей
Перед тем как применять класс с помощью меню Type или палитры CSS, можно просмотреть стиль (рис. 121.1). Например, когда вы помещаете курсор мыши на поля флажка Inline Style (Вложенный стиль) или Block Style (Стиль блока), открывается небольшое окно просмотра, в котором вы видите, как будет выглядеть стиль.
Открываем CSS Editorr Если вы решите, что CSS-правила нуждаются в некоторой корректировке, щелкните по значку ссылки в левом нижнем углу.
Рис. 121.1. В этом окне вы видите, как выглядит CSS-стиль
В верхней части окна имеется описание с информацией о том, как будет применен стиль. В центре видно, как будет выглядеть стиль при его использовании блоком или HTML-элементом. Список параметров внизу показывает всю информацию о стиле.
СОВЕТ 121: Просмотр SS-стилей
05_GoLive_T&T_(145-172)_rus.indd 163
21.01.2006 1:57:01
164 СОВЕТ
122 Изменение активного элемента Чтобы получить сведения о каскадных таблицах стилей для других объектов на странице, выберите элемент или стиль в меню в верхнем правом углу палитры CSS.
Просмотр информации о каскадной таблице стилей
Каскадные таблицы стилей (CSS) представляют собой современную технологию, которая может сделать жизнь веб-дизайнера намного проще. Но они способны добавить и лишних проблем. Когда вы работаете со сложными таблицами стилей, вам может быть непросто отследить все параметры стилей. Палитра CSS включает новую функцию, которая отображает полную информацию о выбранном стиле. Сделайте выбор в режиме Layout Editor и откройте вкладку Style Info (Информация о стиле) в палитре CSS (рис. 122.1). Эта информация поможет понять, как влияют таблицы стилей на выбранный объект.
Рис. 122.1. Раздел Style Info палитры CSS показывает структуру и взаимодействие выбранных объектов в режиме Layout Editor
Например, правила каскадных таблиц CSS настроены таким образом, что, если внешний стиль использует заголовки красного цвета, а встроенный стиль использует заголовки синего цвета, то встроенное определение становится приоритетным, и титры приобретают синий цвет.
ГЛАВА 5
05_GoLive_T&T_(145-172)_rus.indd 164
Работа с каскадными таблицами стилей
21.01.2006 1:57:01
165 СОВЕТ
123
Ссылка на CSS Editor из палитры CSS
Если вы работаете с несколькими страницами и CSS-файлами, отслеживать настроенные стили может быть трудно. В программе GoLive для решения этой задачи используется ссылка на палитру CSS (рис. 123.1). Щелкните по небольшому черному треугольнику рядом с названием любого класса на палитре CSS и выберите команду Edit In (Редактировать в), чтобы открыть файл, в котором указан класс. Если правило было настроено в нескольких файлах, программа GoLive позволит сделать выбор из списка.
Рис. 123.1. Дважды щелкните по классу на палитре CSS, чтобы открыть соответствующую таблицу стилей
Также можно дважды щелкнуть по классу на палитре CSS, чтобы автоматически открыть нужную таблицу стилей. Если выбранное правило было настроено в нескольких файлах, при двойном щелчке по названию класса откроется последняя ссылка в исходном коде. Например, если на одной странице вы применили две внешние таблицы стилей, программа GoLive откроет нужный файл .css и даже выделит правило, которое вы хотите отредактировать. Так как правило выбирается автоматически, необходимо только внести изменения, оценить результаты в окне Live Preview и сохранить файл.
СОВЕТ 123: Ссылка на CSS Editor из палитры CSS
05_GoLive_T&T_(145-172)_rus.indd 165
21.01.2006 1:57:02
166 СОВЕТ
124 Инструмент Point and Shootr Также для привязки внешнего файла .css к нескольким страницам можно использовать инструмент Point and Shoot на палитре CSS. Выделите страницы, активируйте инструмент Pick Whip на палитре CSS и выберите файл .css на вкладке Files в окне Site.
Применение внешней таблицы стилей к нескольким страницам
Если вы создаете новый сайт с использованием CSS, скорее всего, вы привяжете внешний CSS-файл к шаблонам страниц или создадите для сайта CSS-файл по умолчанию (см. Совет 119). Но если вы работаете с устаревшим сайтом, который не основан на шаблонах, привязка его к таблице стилей может оказаться очень сложной задачей. К счастью, программа GoLive позволяет применить внешнюю таблицу стилей к нескольким страницам с помощью палитры CSS. Выполните следующие действия: 1. Выделите веб-страницы на вкладке Files окна Site. Вы можете даже выделить файлы в нескольких вложенных папках (см. Совет 23). 2. Откройте палитру CSS из меню Window. 3. Нажмите и удерживайте кнопку New Link (Новая ссылка) на палитре CSS, чтобы выбрать файл .css, который вы хотите привязать к выделенным страницам (рис. 124.1). Ниспадающее меню автоматически заполняется всеми файлами .css в активном окне Site.
Рис. 124.1. Используя ниспадающее меню или инструмент Point and Shoot на палитре CSS, можно привязать внешний файл .css к нескольким страницам
ГЛАВА 5
05_GoLive_T&T_(145-172)_rus.indd 166
Работа с каскадными таблицами стилей
21.01.2006 1:57:02
167 СОВЕТ
125
Экспорт встроенных стилей
Создавая встроенные стили, может быть, вы захотите использовать определенный стиль с другими страницами. В этом случае можно копировать и вставлять исходный код с одной страницы на другую, но есть и более простой способ. Используя CSS Editor, можно экспортировать встроенную таблицу стилей. Выполните следующие действия, чтобы экспортировать встроенную таблицу стилей:
Импорт внешних стилей Используя эти меню, можно импортировать не только встроенные, но и внешние стили.
1. Откройте страницу с встроенной таблицей стилей. 2. Выполните команду File Export Internal Style Sheet (Файл Экспорт Встроенная таблица стилей). 3. Введите название для нового файла .css и сохраните его. Если вы планируете использовать данный файл на текущем сайте, выберите пункт Root folder (Корневая папка) в ниспадающем меню диалогового окна Save. При этом будет автоматически выбрана корневая папка вашего сайта. Также для экспорта встроенной таблицы стилей в отдельный файл можно выбрать пункт Export Internal CSS (Экспортировать встроенную таблицу стилей) в плавающем меню встроенной таблицы стилей. См. рис. 125.1.
Рис. 125.1. Экспортируя встроенные таблицы стилей и пользуясь методиками, описанными в Совете 124, вы сможете вдохнуть новую жизнь в устаревший сайт
СОВЕТ 125: Экспорт встроенных стилей
05_GoLive_T&T_(145-172)_rus.indd 167
21.01.2006 1:57:02
168 СОВЕТ
126
Использование CSS-шаблонов
Начало работы с новой, незнакомой технологией может быть сложным. Иногда изучить веб-дизайн проще на примере файлов, созданных другими пользователями. Поэтому программа GoLive включает десятки встроенных таблиц стилей, с которыми вы можете работать. Выполните следующие действия: 1. Выполните команду File New, затем выберите слева пункт Web и категорию CSS в центре (рис. 126.1). В нижнем правом углу диалогового окна New находится окно просмотра, которое показывает, как будет выглядеть выбранная вами таблица на стандартной веб-странице. Определившись с выбором, выделите шаблон таблицы в списке и нажмите кнопку OK.
Рис. 126.1. В диалоговом окне New доступны шаблоны CSS-таблиц
ГЛАВА 5
05_GoLive_T&T_(145-172)_rus.indd 168
Работа с каскадными таблицами стилей
21.01.2006 1:57:02
169
2. Программа GoLive создаст новый файл .css на основании шаблона, который вы выбрали в диалоговом окне New (рис. 126.2). Теперь выполните команду File Save As, чтобы сохранить шаблон в корневой папке веб-сайта, с которым вы работаете.
Мгновенное сохранение В плавающем меню диалогового окна New имеется опция Save Instantly (Мгновенное сохранение). Если вы активируете эту опцию, любой новый документ будет автоматически открывать диалоговое окно Save, что позволит избежать вызова команды Save As из меню File.
Рис. 126.2. Программа GoLive создает новый CSS-файл на основании шаблона, который вы выбрали
3. Теперь вы можете настроить CSS-файл как файл по умолчанию для сайта (см. Совет 119), или привязать внешний CSSфайл к существующим страницам сайта (см. Совет 124). После выбора нужной таблицы стилей можно изменить ее настройки или обратиться к файлу-образцу. Откройте файл .css из окна Site и изучите различные правила в окне CSS Editor.
СОВЕТ 126: Использование CSS-шаблонов
05_GoLive_T&T_(145-172)_rus.indd 169
21.01.2006 1:57:03
170 СОВЕТ
127
Удаление подчеркивания ссылок
На форумах, посвященных веб-дизайну, очень часто задают вопрос: «Как мне удалить подчеркивание всех текстовых ссылок?» Для того чтобы добиться этого, придется воспользоваться CSS-таблицами. Вы можете удалить подчеркивание ссылок с помощью встроенных таблиц стилей, но это требует открытия и редактирования каждой страницы по отдельности. Существует и более простое решение с использованием внешней таблицы стилей. Выполните следующие действия: 1. Выберите команду Web CSS Basic CSS в диалоговом окне File New, чтобы создать внешнюю таблицу стилей. 2. Выберите в ниспадающем меню New Element элемент , чтобы создать новую таблицу стилей, которая настраивает отображение гиперссылок на ваших веб-страницах. 3. Выделив слева CSS-правило для элемента , выберите вкладку Font (Шрифт) в CSS Editor и нажмите кнопку No Text Decoration (Нет оформления текста), чтобы удалить подчеркивание (рис. 127.1). Обратите внимание: можно также изменить на этой вкладке такие параметры, как цвет, размер и цвет фона гиперссылок.
Рис. 127.1. Выполнив эти действия, вы сможете отменить подчеркивание ссылок
После сохранения внешнего файла .css на вашем веб-сайте выполните действия, описанные в Совете 124, чтобы применить данный эффект ко всем страницам сайта. Удивлены тем, сколько времени удалось сэкономить благодаря программе GoLive? Теперь вы сможете взять лишнюю неделю летнего отпуска.
ГЛАВА 5
05_GoLive_T&T_(145-172)_rus.indd 170
Работа с каскадными таблицами стилей
21.01.2006 1:57:03
СОВЕТ
128
Создание эффектов Rollover при работе с таблицами стилей
171
Вам знаком эффект, который позволяет поместить курсор мыши на текстовую ссылку, чтобы изменить цвет текста или фон ссылки? Представьте себе: для достижения данного результата тоже необходимо использовать таблицы стилей. Помните: в устаревших браузерах эффект может не поддерживаться, но сами ссылки сохранят свой внешний вид. Выполните следующие действия, чтобы создать эффект Rollover (Переворот): 1. Откройте таблицу стилей (внешнюю или встроенную) в редакторе CSS Editor. 2. Добавьте стиль для элемента a:hover. Для этого выберите стиль в ниспадающем меню New Element справа в окне CSS Editor (см. рис. 128.1).
Рис. 128.1. Выберите стиль в ниспадающем меню New Element
СОВЕТ 128: Создание эффектов Rollover при работе с таблицами стилей
05_GoLive_T&T_(145-172)_rus.indd 171
21.01.2006 1:57:03
172
3. Выделив правило a:hover в левой части окна, измените цвет текста на вкладке Font Properties (Параметры шрифта), как показано на рис. 128.2. Именно такой цвет примет текст, когда вы поместите курсор мыши на ссылку.
Рис. 128.2. Измените цвет эффекта Rollover на вкладке Font Properties
4. Если вы также хотите изменить цвет фона текстовой ссылки, воспользуйтесь полем Background Color (Цвет фона) на вкладке Font Properties. Теперь для всех страниц, которые используют эту таблицу стилей, будет применен данный эффект. Чтобы проверить эффект, переключитесь в режим Layout Preview (см. Советы 92– 94) и поместите курсор мыши на текстовую ссылку (рис. 128.3). Получилось!
Рис. 128.3. Эта строка навигации демонстрирует эффект Rollover в режиме Layout Preview
ГЛАВА 5
05_GoLive_T&T_(145-172)_rus.indd 172
Работа с каскадными таблицами стилей
21.01.2006 1:57:03
173
ГЛАВА 6
Автоматизация повторяющихся заданий Команды Copy (Копировать) и Paste (Вставить) очень удобны, на протяжении многих лет они были единственным средством, которое использовалось для копирования элементов на вебсайте. Но в 1998 году в программе GoLive (в то время она еще называлась GoLive CyberStudio 3) появилась новая функция, которая позволяла сохранить часть страницы в качестве компонента. Затем этот компонент можно было использовать на других страницах. Если вы изменяли оригинальный компонент, то это сопровождалось автоматическим обновлением данного компонента на всех страницах. Это было только начало. С тех пор в каждой новой версии программы GoLive добавлялись новые функции, которые помогали строить и поддерживать веб-сайты, а также автоматизировать повторяющиеся задания. В этой главе мы сконцентрируемся на четырех функциях, предназначенных для автоматизации процесса создания макета: Snippets(Фрагменты), Components (Компоненты), Stationery (Подпись) и Templates (Шаблоны). Данные функции встроены в палитру Library (Библиотека), а некоторые из них доступны в диалоговом окне New (объекты Smart тоже находятся в палитре Library, но о них мы поговорим в главе 7). Также мы расскажем о том, как проверять орфографию ваших веб-страниц.
06_GoLive_T&T_(173-190)_rus.indd 173
24.01.2006 0:28:59
174 СОВЕТ
129 Папки на вкладке Extras окна Site Обратите внимание: разделы палитры Library соответствуют папкам на вкладке Extras окна Site. Следует помнить о том, что данные объекты хранятся на вкладке Extras, но для их использования проще всего применить палитру Library. Кроме того, все шаблоны и файлы подписей, которые вы создаете для сайта, доступны в категории Web диалогового окна File New.
Сохранение и использование Чтобы сохранить объекты, переместите их в папки на палитре Library. Чтобы использовать объекты, переместите их из папок на страницы или в окно Site.
Навигация по палитре Library
Сначала откройте палитру Library (Библиотека) из меню Window. Эта небольшая палитра имеет несколько функций. Она содержит как объекты общего использования, так и команды, которые используются только в определенных проектах. В верхней части палитры Library располагаются шесть вкладок: Snippets, Components, Smart Objects, Stationery, Templates и Documents. Чтобы просмотреть наборы Snippets, выберите вкладку Snippets и так далее (рис. 129.1).
Рис. 129.1. Палитра Library
Под кнопками находится папка Application-wide, а также папки, соответствующие открытым сайтам. Эти папки функционируют так же, как и папки на вкладке Files окна Site. Вы можете открыть или закрыть их с помощью серой стрелки слева от названия папки (в среде Windows щелкните по символу +). Чтобы открыть папку, дважды щелкните по ней. Пользуйтесь стрелкой ⇑ в верхнем левом углу, чтобы перейти на уровень вверх. В плавающем меню палитры Library имеются опции, которые используются для включения и выключения режима предварительного просмотра, а также для отображения окна справа. Эти опции могут быть очень полезны для просмотра шаблона или компонента (рис. 129.2).
Рис. 129.2. Мы просматриваем один из встроенных шаблонов страницы на палитре Library справа
ГЛАВА 6
06_GoLive_T&T_(173-190)_rus.indd 174
Автоматизация повторяющихся заданий
24.01.2006 0:29:04
175 СОВЕТ
130
Использование фрагментов
Snippets (Фрагменты) представляют собой части страницы, которые можно использовать несколько раз. В качестве примеров можно привести адреса, таблицы с данными или элементы JavaScript. Если вы заметите, что приходится использовать один элемент на многих страницах, преобразуйте его во фрагмент. 1. Выполните команду File New, нажмите кнопку Web, затем выберите в среднем окне пункт Pages (Страницы), а в правом окне – пункт HTML Page (Страница HTML). Вы начнете с новой, пустой страницы. 2. Введите ваше имя и адрес страницы. 3. Выделите введенный текст и переместите его в папку Application-wide вкладки Snippets палитры Library. Папка откроется автоматически, и вы увидите новый файл snippet.agls. Если имя файла не выделено, нажмите клавишу Return/Enter. Назовите файл address.agls (рис. 130.1).
Рис. 130.1. При создании нового фрагмента дайте ему описательное название
Проверьте шаблоны фрагментов В области Snippets палитры Library вы найдете несколько интересных шаблонов. Переместите шаблон фрагмента на страницу , чтобы увидеть его в действии. Обратите внимание: некоторые шаблоны предназначены для использования в теле страницы, а некоторые (например, метафрагменты) – для использования в заголовке страницы. Аналогично, отдельные шаблоны применяются в режиме Source Editor, а другие – в режиме Layout Editor. Поэкспериментируйте, и вы поймете, какими эффективными могут быть шаблоны фрагментов.
Выполните следующие действия, чтобы завершить процесс: 1. Выберите пункты меню File New Page, чтобы создать еще одну пустую страницу. 2. Переместите на новую страницу фрагмент address.agls. Готово! Вы успешно создали и применили фрагмент. Создавать фрагменты можно из сеток, таблиц, текста, изображений и так далее. Если вы работаете со стилизованной таблицей, содержащей изображение и текст, а также примечания, можно сохранить ее в качестве одного фрагмента. Чтобы изменить фрагмент, дважды щелкните по файлу в палитре Library, внесите изменения и сохраните документ. Изменения повлияют только на текущий фрагмент, а не на страницы, на которых он использовался ранее.
СОВЕТ 130: Использование фрагментов
06_GoLive_T&T_(173-190)_rus.indd 175
24.01.2006 0:29:04
176 СОВЕТ
131
Использование компонентов
Существует одно важное различие между Snippets (Фрагментами) и Components (Компонентами). Если вы создаете фрагмент, используете его на десяти страницах, а затем изменяете файл фрагмента; страницы, на которых вы ранее применяли данный фрагмент, изменены не будут. Если вы создаете компонент, используете его на десяти страницах, а затем изменяете файл компонента, страницы, на которых вы ранее применяли данный компонент, будут обновлены. Приведем ряд примеров использования компонентов: панели навигации, сообщения о защите авторских прав или любой другой объект, который имеется на нескольких страницах и нуждается в постоянном обновлении. Процесс создания компонента несколько отличается от процесса создания фрагмента. Вместо того чтобы перемещать объекты со страницы во вкладку Components (Компоненты) палитры Library, необходимо сохранить всю страницу как компонент. Для этого выполните команду File Save As и выберите в ниспадающем меню Site Folder (Папка сайта) диалогового окна Save пункт Components, либо выполните команду Save As Component в плавающем меню документа (рис. 131.1).
Рис. 131.1. Используйте ниспадающее меню Site Folder, чтобы сохранить компонент в папку компонентов сайта, либо сохраните файл в качестве компонента в плавающем меню
ГЛАВА 6
06_GoLive_T&T_(173-190)_rus.indd 176
Автоматизация повторяющихся заданий
24.01.2006 0:29:05
177
При сохранении файла используйте описательное название. Это поможет впоследствии, когда вы будете использовать компоненты на странице. После сохранения компонент появится в папке Components окна Site Extras, а также во вкладке Components палитры Library. Чтобы использовать компонент, переместите его из палитры Library на страницу. Чтобы редактировать компонент, дважды щелкните по нему в палитре Library, внесите изменения и сохраните файл. При сохранении компонента все страницы, которые его используют, будут автоматически обновлены (рис. 131.2). После завершения обновления откроется информационное диалоговое окно. Нажмите кнопку OK.
Внимание! Объекты палитры Library, которые относятся к папке Applicationwide Папка Application-wide в палитре Library очень удобна для хранения текстовых объектов. Однако не следует добавлять в эту папку объекты, связанные с другими объектами, которые не были сохранены на вашем сайте (например, с изображениями). Мы советуем сохранять объекты в папке, связанной с определенным сайтом, если только вы на 100 процентов не уверены в том, что объекты, которые используются во фрагменте, компоненте, подписи или шаблоне, не ссылаются на внешние объекты.
Рис. 131.2. Программа GoLive покажет, какие страницы связаны с компонентом и будут обновлены
Совет После изменения компонента, который используется на других страницах, вы должны загрузить измененные страницы на веб-сервер.
СОВЕТ 131: Использование компонентов
06_GoLive_T&T_(173-190)_rus.indd 177
24.01.2006 0:29:05
178 СОВЕТ
132 Подписи и шаблоны Страницы с подписями могут быть очень полезны, если необходимо изменить оригинальный файл, но сохранить страницы, которые были созданы с его применением (например, при работе с информационным сообщением или архивом). Однако если вы хотите обновить несколько страниц, советуем использовать страницы с шаблонами, потому что такие страницы будут обновлены в соответствии с обновлениями оригинального файла.
Использование подписи
Если вам приходилось видеть фирменные бланки компании, вам знакомо понятие Stationery (Подпись). Если вы возьмете бланк, напечатаете на нем текст письма, отправите письмо вашей маме, а затем измените бланк, письмо, отправленное маме, останется неизменным. Страницы с подписями в программе GoLive функционируют примерно так же. Создайте обычную страницу, но сохраните ее не на вкладке Files окна Site, а в папке Stationery. Это можно сделать двумя простыми способами: выполните команду File Save As и выберите пункт Stationery (Подпись) в ниспадающем меню Site Folder диалогового окна Save, либо выполните команду Save As Stationery в плавающем меню документа. Новый файл подписи появится в папке Stationery на вкладке Extras диалогового окна Site, а также в разделе Stationery палитры Library. Чтобы создать новую страницу из файла подписи, выполните одно из следующих действий: • переместите файл подписи из папки Stationery на вкладке Extras или из раздела Stationery палитры Library на вкладку Files в окне Site. Появится диалоговое окно, в котором вас спросят, хотите ли вы переместить файл или создать новый. Выберите пункт Create (Создать), чтобы создать и открыть новую страницу; • дважды щелкните по файлу подписи в папке Stationery на вкладке Extras или используйте вкладку Stationery палитры Library. Откроется диалоговое окно, в котором вас спросят, хотите ли вы создать новую страницу или изменить страницу подписи. Нажмите кнопку Create, чтобы открыть новую страницу на основе подписи. Введите название страницы и сохраните ее на сайте (рис. 132.1). Рис. 132.1. Выберите команду Create, чтобы создать новую страницу на основе файла подписи, либо команду Modify, чтобы изменить файл подписи
Если вы хотите изменить файл подписи, дважды щелкните по нему и выберите команду Modify (Изменить). Внесите изменения и сохраните файл. Изменение оригинального файла никак не повлияет на страницы, которые были созданы с его использованием.
ГЛАВА 6
06_GoLive_T&T_(173-190)_rus.indd 178
Автоматизация повторяющихся заданий
24.01.2006 0:29:05
179 СОВЕТ
133
Создание шаблона
Из четырех типов объектов (Snippets, Components, Stationery и Templates) Templates (Шаблоны) являются самыми эффективными. Создав сайт на основе шаблона, вы сможете быстро обновить его страницы. Создание шаблонов требует немного больше времени по сравнению с созданием подписей, поэтому несколько последующих Советов будут посвящены исключительно работе с шаблонами. Совет Также для изменения страниц сайта вы можете применять каскадные таблицы стилей (см. главу 5).
Основной принцип шаблона заключается в том, что отдельные области страницы являются заблокированными и не могут быть изменены, а другие области открыты для редактирования. Обычно заблокированные области включают части страницы, которые повторяются на всем сайте (например, панели навигации), а редактируемые области содержат элементы, которые различаются на разных страницах (например, текст). При создании шаблона страницы вы используете палитру Template Regions (Области шаблона) в меню Window, чтобы указать, какие разделы страницы будут доступны для редактирования. Чтобы создать редактируемую область, сделайте выбор на странице и нажмите кнопку Create New Editable Region (Создать новую редактируемую область) в палитре Template Regions. Программа GoLive автоматически создает названия текстовых областей, которые соответствуют нескольким первым словам в выбранном разделе. Для других объектов выбираются простые названия Object (Объект) или Region (Область). Чтобы переименовать любую область, щелкните по ее названию в палитре Template Regions и нажмите клавишу Return/ Enter, либо щелкните еще раз (рис. 133.1).
Редактируемые таблицы CSS в заголовке шаблона Совет: если вы записали в шаблон страницы таблицу CSS, при создании новых страниц из шаблона она будет заблокирована. Нельзя использовать палитру Template Regions, чтобы привязать редактируемые области к заголовку , но можно перейти к исходному коду и отредактировать ее самостоятельно. Добавьте текст перед тэгом <style> и текст после заключительного тэга . Несмотря на то, что эти области не будут отображаться в палитре Template Regions, при создании страницы из шаблона можно дважды щелкнуть по тэгу заголовка CSS-таблицы на странице, чтобы отредактировать ее.
Рис. 133.1. Программа GoLive автоматически создает названия для новых областей. Вы можете отредактировать эти названия в палитре Template Regions
СОВЕТ 133: Создание шаблона
06_GoLive_T&T_(173-190)_rus.indd 179
24.01.2006 0:29:05
180 Шаблоны в диалоговом окне New Когда вы выбираете команду File New, в появившемся диалоговом окне имеются пять категорий. Если вы открыли сайт, который включает шаблоны или файлы подписей, эти файлы будут находиться в разделе Favorites (Избранное).
Отключите функцию Selection Defines Region Name (Выделение определяет название области) в плавающем меню Template Regions, чтобы отменить автоматическое наименование областей. При этом все новые области будут называться Region2, Region3 и так далее. Редактируемые области выделены на странице темно-зеленым цветом, поэтому найти их очень просто. Дважды щелкните по названию области в палитре Template Regions, чтобы определить ее положение на странице. При этом область будет выделена светло-зеленым цветом (рис. 133.2).
Рис. 133.2. Редактируемые области (здесь они выглядят светло-серыми) на странице шаблона выделяются светло-зеленым цветом
Создайте на странице редактируемые области и сохраните ее в качестве шаблона. Для этого выполните команду File Save As и выберите пункт Templates (Шаблоны) в ниспадающем меню Site Folder диалогового окна Save, либо выполните команду Save As Template в плавающем меню документа. Новый шаблон страницы появится в папке Templates на вкладке Extras в окне Site, а также в разделе Templates палитры Library. Совет Необходимо указать хотя бы одну редактируемую область на странице, чтобы шаблон смог нормально функционировать. Если вы не выбрали редактируемую область, программа GoLive будет воспринимать страницу как обычную, и вы не сможете создавать другие страницы на ее основе.
ГЛАВА 6
06_GoLive_T&T_(173-190)_rus.indd 180
Автоматизация повторяющихся заданий
24.01.2006 0:29:05
181 СОВЕТ
134
Создание страниц из шаблона
После завершения работы над шаблоном понадобится создать из него новые страницы. Для этого воспользуйтесь одной из описанных ниже методик: • выполните команду File New и выберите пункты меню Web Templates, чтобы просмотреть все шаблоны для активного сайта. Выберите нужный шаблон и нажмите кнопку OK (рис. 134.1);
Рис. 134.1. Можно создавать страницы из шаблонов с помощью диалогового окна New или в окне Site
• выполните Ctrl+щелчок (Mac) или щелчок правой кнопкой мыши (Windows) на вкладке Files окна Site и выберите пункты меню New Page from Template (Страница из шаблона). Выберите в подменю шаблон страницы в списке; • дважды щелкните по файлу шаблона в папке Templates на вкладке Extras в окне Site или воспользуйтесь вкладкой Templates палитры Library. Появится диалоговое окно, в котором вас спросят, хотите ли вы изменить файл или создать новый файл. Нажмите кнопку Create (Создать), чтобы создать новую страницу из шаблона;
СОВЕТ 134: Создание страниц из шаблона
06_GoLive_T&T_(173-190)_rus.indd 181
24.01.2006 0:29:05
182 Цвет выделения Перейдя на вкладку Highlight палитры View, вы можете изменить цвет и тип выделения, которое используется для обозначения редактируемых областей. Переместите ползунки, чтобы изменить непрозрачность выделения редактируемой области, либо нажмите кнопку Show Border Only (Отображать только границу) справа от ползунка непрозрачности, чтобы выделить только границу области. Чтобы полностью изменить цвет, щелкните по нему и выберите новый цвет на палитре Color (Цвет) или Swatches (Образцы цвета).
Все редактируемые области отображаются в своем обычном цвете, а заблокированные области (то есть области, не предназначенные для редактирования), выделяются фиолетовым цветом. Вы можете попробовать изменить выделенную область, но у вас ничего не получится, потому что она заблокирована. Вы можете изменять только редактируемые области. Сохраните страницу на сайте.
Применение шаблонов Что делать, если вы работаете с существующей страницей, которая уже содержит объекты, а вам необходимо добавить эти объекты в шаблон? Далее мы расскажем, как это сделать. Вы можете открыть страницу и выбрать в плавающем меню документа пункты Template Apply Template yourtemplate. html, где yourtemplate.html – это название шаблона, который вы применяете. Появится диалоговое окно, в котором вас попросят указать редактируемую область для содержимого страницы. Сделайте выбор. Теперь страница примет форму шаблона. Также вы можете открыть страницу, к которой вы хотите применить шаблон, и выбрать в меню Special пункты Template Apply Template (Шаблон Применить шаблон). Откроется диалоговое окно Open с папкой Templates для загруженного сайта. Выберите нужный шаблон и нажмите кнопку Open. Вас попросят выбрать редактируемую область для содержимого страницы. Выберите название области и нажмите кнопку OK (рис. 134.2).
Рис. 134.2. При применении шаблона к существующей странице следует выбрать область для содержимого страницы
ГЛАВА 6
06_GoLive_T&T_(173-190)_rus.indd 182
Автоматизация повторяющихся заданий
24.01.2006 0:29:06
183 СОВЕТ
135
Создание вложенных шаблонов
В программе GoLive CS2 появилась новая функция, позволяющая создавать вложенные шаблоны. Данная функция дает возможность создавать один шаблон из другого, это может быть полезно, к примеру, в случае, если сайт имеет одинаковый дизайн страниц, но некоторые его разделы слегка отличаются от шаблона. Чтобы создать вложенный шаблон, сначала необходимо создать шаблон-мастер, на котором будет основан новый шаблон. Создайте первый шаблон (см. Совет 133). Далее дважды щелкните по шаблону на палитре Library или выберите его под категорией Web в диалоговом окне File New. Когда вас спросят, хотите ли вы создать новую страницу из шаблона или изменить ее, нажмите кнопку Create. Добавьте другие редактируемые области на новую страницу и выберите в плавающем меню страницы команду Save As Template. Обязательно введите уникальное название для нового шаблона. Теперь вы можете создавать новые страницы из второго шаблона. Если первый шаблон был обновлен, будут обновлены не только связанные с ним страницы, но и все страницы, связанные со вторым шаблоном. Переключитесь в режим просмотра Icon View в окне Site (см. Совет 20), чтобы отобразить в левом нижнем углу значка шаблона дополнительный маркер, который показывает, что данный шаблон является вложенным (рис. 135.1). Регулярный шаблон
Вложенный шаблон
Рис. 135.1. В режиме просмотра Icon View вложенные шаблоны обозначаются маркерами
СОВЕТ 135: Создание вложенных шаблонов
06_GoLive_T&T_(173-190)_rus.indd 183
24.01.2006 0:29:06
184 СОВЕТ
136
Переназначение шаблонов
Допустим, что вы создали целый сайт на основе шаблонов. Отлично. Но затем вы решили полностью изменить дизайн сайта. Как же разорвать связь между страницами и первым шаблоном, а потом привязать все страницы ко второму шаблону? Это довольно просто. Сначала сохраните новый дизайн в качестве шаблона и укажите редактируемые области. Чтобы упростить обновление страниц с использованием нового шаблона, используйте в новом шаблоне названия редактируемых областей, которые совпадают с названиями областей в оригинале. Это позволит без проблем перенаправить содержимое сайта на новый шаблон. Сначала мы расскажем о том, как перенастроить одну страницу, а затем перейдем к переназначению нескольких страниц. Воспользуйтесь одной из следующих методик, чтобы изменить шаблон, который используется страницей: • откройте страницу и выберите в плавающем меню документа пункты Template Apply Other Template newtemplate.html, где newtemplate.html – это название файла нового шаблона (рис. 136.1);
Рис. 136.1. Выберите в плавающем меню документа другой шаблон для страницы
• откройте страницу и нажмите кнопку Template в палитре Template Regions. Воспользуйтесь инструментом Fetch URL, чтобы выбрать новый файл шаблона в папке Templates на вкладке Extras окна Site (рис. 136.2).
ГЛАВА 6
06_GoLive_T&T_(173-190)_rus.indd 184
Автоматизация повторяющихся заданий
24.01.2006 0:29:06
185
Переназначение компонентов
Рис. 136.2. Для изменения шаблона страницы воспользуйтесь инструментом Fetch URL в палитре Template Regions
В обоих случаях при совпадении названий редактируемых областей новый шаблон будет применен автоматически. Если в двух шаблонах вы использовали разные названия областей, появится диалоговое окно, в котором вас попросят выбрать редактируемую область в списке. Это может быть трудно, потому что вы можете выбрать только одну область. Чтобы переназначить шаблон, который используется на нескольких страницах, воспользуйтесь палитрой In & Out Links, как описано далее:
Вы можете использовать палитру In & Out Links для переназначения не только шаблонов, но и компонентов. Выполните действия, которые необходимы для переназначения шаблонов страниц сайта, но выберите оригинальный компонент в папке Components на вкладке Extras окна Site, а затем выделите новый компонент.
1. Откройте палитру In & Out Links из меню Window. 2. Щелкните по оригинальному файлу шаблона, чтобы выбрать его. Он должен находиться в папке Templates на вкладке Extras окна Site. Палитра In & Out Links отобразит все страницы, связанные с устаревшим шаблоном. 3. Воспользуйтесь инструментом Fetch URL рядом с названием шаблона, чтобы выбрать новый шаблон в папке Templates (рис. 136.3).
Рис. 136.3. С помощью палитры In & Out Links можно переназначить шаблон для нескольких страниц
СОВЕТ 136: Переназначение шаблонов
06_GoLive_T&T_(173-190)_rus.indd 185
24.01.2006 0:29:06
186 СОВЕТ
137 Отсоединение компонентов Вы можете не только отсоединить шаблон страницы исходного документа, но и отсоединить компонент, чтобы разорвать ссылку. Выполните Ctrl+щелчок/щелчок правой кнопкой мыши на компоненте на странице и выберите пункты меню Components Detach Selected Component Отсоединить выбранный компонент). Также вы можете выполнить команду Detach All Components (Отсоединить все компоненты) или Detach Single Component (Отсоединить один компонент), а затем выбрать название компонента в списке. После этого обновления оригинального компонента не будут влиять на отсоединенный компонент.
Отсоединение шаблонов
Возможно, со временем вы решите, что связь между страницей и шаблоном больше не нужна. Вы можете отсоединить шаблон. При этом дизайн страницы сохранится, но ее связь с шаблоном будет разорвана. Обновления шаблона больше не будут влиять на выделенную страницу. Чтобы отсоединить страницу от ее шаблона, откройте ее. Выполните команду Templates Detach from Template (Отсоединить от шаблона) в плавающем меню документа, либо выполните команду Template Detach from Template в меню Special. Отсоединение заблокированных областей будет удалено, и вы сможете редактировать всю страницу (рис. 137.1).
Рис. 137.1. После отсоединения от шаблона страница станет доступна для редактирования
ГЛАВА 6
06_GoLive_T&T_(173-190)_rus.indd 186
Автоматизация повторяющихся заданий
24.01.2006 0:29:06
187 СОВЕТ
138
Использование образцов шаблонов
Вероятно, вы заметили, что диалоговое окно New содержит десятки шаблонов страниц, которые вы можете использовать для создания веб-проектов. Поговорим о том, как вы можете использовать данные шаблоны. Сначала выполните команду File New и выберите пункт Web слева, а также одну из категорий Page Samples (Образцы страниц) в центре. Выберите один из шаблонов, чтобы отобразить окно предварительного просмотра справа (рис. 138.1). Определившись с выбором шаблона страницы, нажмите кнопку OK и сохраните его в папку Templates вашего сайта (см. Совет 133). Теперь вы можете создавать новые страницы из шаблона, как описано ранее в этой главе, либо изменить шаблон в соответствии с вашими предпочтениями. Обратите внимание: образцы шаблонов уже содержат редактируемые области, поэтому вы можете сразу добавлять новые объекты.
Использование избранных образцов Если вы найдете образец страницы, с которым вы будете часто работать, вы можете сохранить его в качестве избранного образца. Выберите образец страницы в диалоговом окне New, а также выполните команду Add to Favorites (Добавить в избранное) в плавающем меню в верхнем правом углу диалогового окна. Теперь образец страницы появится в категории Favorites, и вы сможете найти его без труда.
Рис. 138.1. В диалоговом окне New доступны многочисленные образцы шаблонов
Возможно, вам понадобится разблокировать страницу, чтобы внести изменения; затем можно снова ее заблокировать. Для этого выполните команду Special Template Unlock Page (Разблокировать страницу). Замените изображения на странице и текст, а затем повторно сохраните шаблон. Теперь вы сможете использовать данный шаблон так же, как и любой другой. Вы увидите результат во время комбинирования шаблонов страниц с встроенными CSS-шаблонами. Вы можете привязать внешнюю таблицу стилей к шаблону (см. Совет 126), чтобы изменить дизайн страницы или сайта.
СОВЕТ 138: Использование образцов шаблонов
06_GoLive_T&T_(173-190)_rus.indd 187
24.01.2006 0:29:06
188 СОВЕТ
139 Создание личного словаря Во время проверки орфографии документа можно добавить слово в ваш личный словарь. Для этого нажмите кнопку Learn (при условии, что выделенное флажком слово является верным). Слово будет добавлено в ваш личный словарь, и программа больше не будет воспринимать его как ошибку. Также вы можете добавлять слова в ваш личный словарь в разделе Spell Checker (Проверка орфографии) окна настроек программы.
Проверка орфографии
Авторы этой книги заметили одну интересную особенность: Адам делает меньше орфографических ошибок, чем Линн, но Линн печатает быстрее Адама. В общем, мы вдвоем делаем много ошибок, поэтому функция проверки орфографии на одной странице, группе страниц или на всем сайте способна существенно упростить и ускорить нашу работу. Откройте окно Check Spelling (Проверить орфографию) из меню Edit. Проверка орфографии начнется с текущего положения курсора на открытой странице. Чтобы выполнить проверку с начала страницы, выберите поле флажка From Top (Сверху). Для проверки нескольких документов вы можете использовать меню Work On (Работать с), как показано на рис. 139.1.
Рис. 1. Произведите настройки и выберите из выпадающего меню Work On файлы для обработки Выберите язык проверки в ниспадающем меню, а также настройте опции проверки орфографии. Затем нажмите кнопку Start, чтобы начать проверку. Во время проверки вы можете выбрать следующие опции: • Delete (Удалить) удаляет слово со страницы; • Replace (Заменить) заменяет сомнительное слово выбранным; • Ignore (Игнорировать) пропускает слово; • Ignore All (Игнорировать все) пропускает все повторы сомнительного слова; • Learn (Добавить) добавляет слово в ваш личный словарь; • Next File (Следующий файл) переходит к следующему документу на сайте.
ГЛАВА 6
06_GoLive_T&T_(173-190)_rus.indd 188
Автоматизация повторяющихся заданий
24.01.2006 0:29:07
189 СОВЕТ
140
Изменение документов на всем сайте
Время от времени необходимо вносить изменения в документы на всем сайте, например, обновить тип документа для всех страниц. Программа GoLive CS2 предлагает простую функцию, которая позволяет быстро выполнить такое изменение. Вам доступны следующие опции изменения документов на всем сайте: Convert Style (Преобразовать стили), Convert Encoding (Преобразовать кодировку), Convert to HTML (Преобразовать в формат HTML), Change Doctype (Изменить тип документа), Convert to XHTML Mobile (Преобразовать в формат XHTML Mobile) и Rewrite Source Code (Переписать исходный код). Выполните команду Edit Document Content (Редактировать Содержимое документа) и выберите одну из пяти опций в подменю (рис. 140.1).
Рис. 140.1. Можно выбрать опцию преобразования в подменю Special Convert. Найдите команду Rewrite Source Code в меню Special Source Code
Далее мы приведем краткое описание всех опций: • Convert Styles сохраняет стили текста и конвертирует их в маркеры и CSS-таблицы; • Change Encoding изменяет метатэг набора символов и перекодирует весь текст на странице (см. Совет 45); • Convert to HTML конвертирует кодировку XHTML в формат HTML; • Convert to XHTML конвертирует кодировку HTML в формат XHTML;
СОВЕТ 140: Изменение документов на всем сайте
06_GoLive_T&T_(173-190)_rus.indd 189
24.01.2006 0:29:07
190 • Change DOCTYPE позволяет настроить другой тип документа для страниц (см. Совет 65); • Convert to XHTML Mobile конвертирует веб-страницы в формат XHTML, уменьшает размер изображений, а также удаляет ненужный код и графические объекты, чтобы оптимизировать содержимое для мобильных устройств. Независимо от того, какую команду преобразования вы выбрали, вы увидите диалоговое окно, которое запросит вашего подтверждения (например, может случиться так, что вы передумаете конвертировать сайт из формата XHTML в HTML), а также позволяет настроить параметры. Измените настройки и воспользуйтесь меню Work On (Работать с) в нижней части диалогового окна, чтобы выбрать страницы для модификации (рис. 140.2).
Рис. 140.2. Измените настройки преобразования и выберите файлы для обработки перед тем, как нажать кнопку OK
ГЛАВА 6
06_GoLive_T&T_(173-190)_rus.indd 190
Автоматизация повторяющихся заданий
24.01.2006 0:29:07
191
ГЛАВА 7
Интеграция в пакет Creative Suite Пожалуйста, поднимите руки те, кто работает с программой Photoshop? Так мы и думали. Практически все используют программу Photoshop. А большинство дизайнеров работают в программе Illustrator. Всем приходится иметь дело с файлами Adobe PDF. Это очень важно для пользователей программы GoLive, потому что теперь они могут без проблем обрабатывать файлы из других приложений пакета Creative Suite. Независимо от того, работаете ли вы с файлами ImageReady, цифровыми фотографиями из Photoshop, логотипами из Illustrator или файлами Adobe PDF из Acrobat, программа GoLive позволяет перемещать любое содержимое на ваш веб-сайт. Уникальная функция Smart Objects (Разумные объекты) программы GoLive дает возможность добавлять на ваш сайт любые исходные файлы Adobe. Мы уверены, что к концу этой главы вы поймете, насколько полезен может быть пакет Creative Suite.
07_GoLive_T&T_(191-216)_rus.indd 191
25.01.2006 2:20:40
192 СОВЕТ
141
Smart Objects
Вы используете на ваших веб-страницах изображения в формате GIF и JPEG, не так ли? Программы Adobe позволяют конвертировать различные исходные файлы, например, многослойные документы Photoshop или изображения высокого разрешения в формате TIFF, в форматы GIF и JPEG в GoLive. Вы можете сохранить исходные файлы Smart Objects в папке SmartObjects на вкладке Extras окна Site. Методика хранения позволяет использовать файлы, а программа GoLive может отслеживать их перемещения. Чтобы добавить Smart Object, выберите исходный файл в папке SmartObjects и переместите его на веб-страницу, как показано на рис. 141.1.
Рис. 141.1. Чтобы добавить Smart Object, переместите исходные файлы в режиме Layout Editor
После добавления объекта Smart Object выберите настройки оптимизации изображения в диалоговом окне Save For Web (см. Совет 142). Сохраните конечный файл в папке Site Root.
ГЛАВА 7
07_GoLive_T&T_(191-216)_rus.indd 192
Интеграция в пакет Creative Suite
25.01.2006 2:20:44
193
Приведем полный список файловых форматов, которые поддерживаются функцией Smart Objects: Файловые форматы RGB:
Файловые форматы CMYK:
• Adobe Illustrator (.ai и .aisvg);
• Adobe Illustrator (.ai и .aisvg);
• Adobe Photoshop (.psd);
• Adobe Photoshop (.psd);
• BMP;
• EPS;
• Clipboard;
• JPEG;
• EPS;
• JPEG2000;
• GIF;
• PDF;
• JPEG;
• защищенный PDF;
• JPEG2000;
• SVG;
• PICT;
• SVGZ (сжатый);
• PCX;
• Targa;
• PDF;
• TIFF, простой;
• защищенный PDF;
• TIFF, многослойный;
• Pixar;
• TIFF, сжатие JPEG.
Преобразование в формат CMYK при размещении печатных материалов в сети Internet Исходные файлы Smart Objects, которые имеют высокое разрешение, автоматически преобразуются в файлы с разрешением 72 dpi, при этом цветовая модель CMYK мгновенно преобразуются в модель RGB. Это позволяет без проблем размещать печатные материалы в сети Internet.
142 Форматы GIF и JPEG Если вы применяете алгоритм сжатия к таким изображениям, как кнопки, баннеры, логотипы и другие рисунки, содержащие стандартные цвета и повторяющиеся палитры, выберите формат GIF. Если фотографии или файлы с мягкими градиентами, выберите формат JPEG.
Оптимизация изображений с помощью функции Save For Web
Диалоговое окно Save For Web (Сохранить для сети Internet) появляется каждый раз, когда вы создаете Smart Object (см. Совет 141) в программе GoLive. Один и тот же интерфейс используется для создания графического изображения в Photoshop, ImageReady, Illustrator или GoLive. Функция Save For Web в GoLive (рис. 142.1) позволяет быстро оптимизировать исходные файлы в такие графические форматы, как GIF, JPEG и PNG. Алгоритмы оптимизации дают возможность оптимизировать качество и минимизировать время загрузки в одном диалоговом окне. Рассмотрим основные функции диалогового окна. Вкладки Инструменты
Размер файла/планируемое время загрузки Настройки оптимизации
Рис. 142.1. Диалоговое окно Save For Web оптимизирует все исходные файлы Smart Objects в конечные файлы, которые удобны для использования в сети Internet
ГЛАВА 7
07_GoLive_T&T_(191-216)_rus.indd 194
Интеграция в пакет Creative Suite
25.01.2006 2:20:44
195
В верхней части окна Save For Web имеются четыре вкладки, которые показывают (слева направо); оригинальное несжатое изображение, оптимизированное изображение в режиме реального времени, изображение 2-Up и изображение 4-Up. Изображения располагаются рядом, что позволяет вам их сравнить. В правой части окна вы можете выбрать настройку оптимизации в ниспадающем меню или создать новую настройку с применением доступных опций. Вы можете выбирать такие форматы, как JPEG, GIF, PNG-8, PNG-24 или WBMP. Скорее всего, вы будете работать только с форматами JPEG и GIF. В процессе изменения настроек оптимизации вы увидите окно предварительного просмотра изображения слева, а также сведения о предполагаемом размере файла и времени загрузки в нижней части диалогового окна. Данные настройки позволяют выбрать оптимальные параметры оптимизации для файла. Слева располагается небольшая панель с четырьмя инструментами. Используйте инструмент Hand (Рука) для перемещения по изображению; дважды щелкните по инструменту Hand, чтобы уместить все изображение в окно. Обратите внимание: во время перемещения в режимах 2-Up и 4-Up все изображения панорамируются вместе, что позволяет сравнить графические детали при различных настройках оптимизации. Щелкните по окну инструментом Zoom (Масштаб), чтобы увеличить масштаб изображения; выполните Option/Alt+щелчок, чтобы уменьшить масштаб.
Изменение размеров изображения в диалоговом окне Save For Web Чтобы изменить размеры конечного файла, но не исходного изображения, введите новые значения на вкладке Image Size (Размер изображения) в нижнем правом углу окна Save For Web. Нажмите кнопку Apply (Применить), а не клавишу Return или Enter, так как клавиша Return/Enter подтверждает все изменения, а не только изменения размеров.
СОВЕТ 142: Оптимизация изображений с помощью функции Save For Web
07_GoLive_T&T_(191-216)_rus.indd 195
25.01.2006 2:20:44
196 СОВЕТ
143
Использование в качестве Smart Object изображений большого размера в формате JPEG
Спросите любого веб-дизайнера, следует сжимать файлы в формате JPEG или нет. Скорее всего, он закатит глаза, топнет ногой и закричит: «Конечно, нет!» Да, несколько лет назад это было так. Однако современные цифровые камеры сохраняют фотографии очень высокого качества в формате JPEG. То, что изображение JPEG может быть высококачественным, разумеется, противоречит ожиданиям многих веб-дизайнеров. Если вы видите изображение в формате JPEG, это еще далеко не значит, что оно безвозвратно утеряло свое качество. Следовательно, вы можете использовать высококачественное изображение в формате JPEG в качестве исходного файла Smart Object, даже несмотря на то, что оно было сжато дважды: сначала камерой, а затем программой GoLive. Программа GoLive содержит новую функцию, которая упрощает использование изображений JPEG в качестве объектов Smart. Выполните команду GoLive Preferences (Mac) или Edit Preferences (Windows) и выберите раздел Smart Objects для параметров Images (рис. 143.1).
Рис. 143.1. Вы можете изменить размеры файла JPEG для объекта Smart в окне настройки параметров
Опция, которая автоматически конвертирует большие изображения в объекты Smart, выбрана по умолчанию. Данная функция активируется в случае, если размеры исходного изображения превышают 1000 пикселей. При желании вы можете изменить эту настройку, но значение в 1000 пикселей является оптимальным, так как оно позволяет использовать любые небольшие изображения без преобразования и преобразует более крупные изображения в объекты Smart. Чтобы увидеть, как действует эта функция, переместите крупное изображение в формате JPEG (например, фотографию с цифровой камеры 4-мегапикселя) в режим Layout Editor.
ГЛАВА 7
07_GoLive_T&T_(191-216)_rus.indd 196
Интеграция в пакет Creative Suite
25.01.2006 2:20:44
197 СОВЕТ
144
Работа с исходными и конечными файлами
Возможность сжатия исходных файлов в веб-изображения в программе GoLive очень удобна, но это только начало. Истинное преимущество объектов Smart Objects проявляется тогда, когда исходные и конечные изображения начинают работать вместе (рис. 144.1). Например, если вы измените размеры объекта Smart в режиме Layout Editor (удерживайте нажатой клавишу Shift, чтобы сохранить пропорции), программа GoLive автоматически сгенерирует новый конечный файл с теми же настройками оптимизации. Новый файл перезаписывает текущую версию, поэтому вам не придется иметь дело с несколькими копиями. Это позволяет быстро внести необходимые изменения. Чтобы изменить настройки оптимизации для объекта Smart, нажмите кнопку Settings в палитре Inspector и измените параметры сжатия. Нажмите кнопку Save, и новый конечный файл будет сохранен на сайте. Самое главное, о чем следует помнить: исходный файл остается неизменным. Вы можете изменять размер и сжатие объекта Smart множество раз, но это не повлияет на исходный файл, а конечный файл будет восстанавливаться в соответствии с оригиналом, следовательно, качество изображения не будет утеряно. Дважды щелкните по объекту Smart Object в режиме Layout Editor. Вместо того чтобы открыть конечный файл JPEG или GIF, программа GoLive откроет исходный файл в программе, в которой он был создан (к примеру, в Photoshop или Illustrator). Внесите необходимые изменения в исходный файл, например, добавьте или удалите слои, отредактируйте текст или добавьте корректирующие слои. Затем сохраните файл. Когда вы переключитесь в GoLive, система мгновенно распознает внесенные вами в другой программе Creative Suite изменения и автоматически обновит все конечРис. 144.1. Магия Smart Objects заключается в smart соединении ные изображения. исходного и конечного файлов
СОВЕТ 144: Работа с исходными и конечными файлами
07_GoLive_T&T_(191-216)_rus.indd 197
25.01.2006 2:20:44
198 СОВЕТ
145
Обмен объектами Smart
В предыдущих версиях GoLive вы должны были перемещать исходный файл (список поддерживаемых форматов исходный файлов вы найдете в Совете 141) на страницу, чтобы открыть окно Save For Web, в котором генерируется конечный файл (.gif или .jpg). Программа GoLive CS2 пошла дальше: теперь вы можете создавать веб-изображения из исходных файлов в окне Site. Преимущество этой функции состоит в том, что вы можете создать веб-версию изображения даже в том случае, если у вас еще нет для него страницы. Процесс очень прост. Выберите одну из следующих методик: • выделите исходный файл в окне Site, а затем щелкните по вкладке Smart в палитре Inspector и нажмите кнопку Create Smart Object (рис. 145.1);
Рис. 145.1. С помощью кнопки Create Smart Object в палитре Inspector вы можете создать веб-изображение непосредственно из исходного файла
• переместите исходный файл из правой панели окна Site на вкладку Files на левой панели окна Site. В обоих случаях откроется окно Save For Web, в котором вы можете настроить сжатие изображения, ввести его название и сохранить файл (за дополнительной информацией по оптимизации обратитесь к Совету 142). Новый конечный файл можно использовать с любым количеством страниц, причем, как и объекты Smart, он будет обновляться в случае, если вы отредактируете оригинальный исходный файл в соответствующей программе.
ГЛАВА 7
07_GoLive_T&T_(191-216)_rus.indd 198
Интеграция в пакет Creative Suite
25.01.2006 2:20:44
199 СОВЕТ
146
Интеграция с Photoshop или ImageReady CS2
Вы можете переместить документы Photoshop (файлы с расширением .psd) из папки SmartObjects (либо с любого диска на вашем компьютере или в сети) на страницу GoLive. Когда откроется окно Save For Web, сохраните изображение в нужном формате и используйте его на вашем сайте. Если хотите, вы можете сначала добавить на страницу метку Photoshop Smart Object, а затем настроить ее в соответствии с параметрами вашего дизайна. Переместите метку из раздела Smart палитры Objects на страницу и воспользуйтесь палитрой Inspector, чтобы найти исходный файл (нажмите кнопку Browse с изображением папки справа от поля Source, как показано на рис. 146.1).
Редактирование оригинальных исходных файлов Дважды щелкните по файлу PSD, чтобы открыть и изменить его в программе Photoshop. Вы можете добавить или удалить слои, отредактировать текст, изменить цвета, добавить фильтры, добавить корректирующие слои, а также удалить фон.
Вы можете даже открывать файлы в Illustrator! Рис. 146.1. Можно добавить метку Smart Object и найти документ Photoshop с помощью палитры Inspector
Когда вы выберете исходный файл, откроется окно Save For Web, в котором отобразится версия изображения, точно соответствующая размерам метки. Выберите настройки сжатия и сохраните версию файла на вашем сайте. Используя данный метод, можно выбрать для исходных файлов другие форматы, например, EPS или TIFF (список поддерживаемых файловых форматов вы найдете в Совете 141).
Вы можете добавлять на страницы GoLive не только исходные файлы формата PSD, но и файлы Adobe Illustrator (в формате .ai). Для обновления конечного файла дважды щелкните по нему в режиме Layout Editor. Файл будет открыт в программе Illustrator.
СОВЕТ 146: Интеграция с Photoshop или ImageReady CS2
07_GoLive_T&T_(191-216)_rus.indd 199
25.01.2006 2:20:44
200 СОВЕТ
147 Макеты ImageReady и Illustrator Можно использовать методики, описанные в Совете 147, чтобы добавить в GoLive документы Illustrator или ImageReady с объектами, созданными с использование инструмента Slice Tool (Ломтик). Преимущество программы ImageReady заключается в том, что она поддерживает эффекты Rollover, удаленные эффекты Rollover, гиперссылки и так далее. Еще один способ применения макетов ImageReady в GoLive мы опишем в Совете 150.
ГЛАВА 7
07_GoLive_T&T_(191-216)_rus.indd 200
Оптимизация макетов, созданных в Photoshop
Вы можете добавлять на веб-страницы обычные файлы Photoshop, а также файлы, в которых используются объекты, созданные с использование инструмента Slice Tool (Ломтик). Создайте новый макет страницы в программе Photoshop, разделите его на «ломтики», а затем воспользуйтесь одной из двух описанных в Совете 146 методик, чтобы поместить файл PSD на страницу GoLive. Откроется окно Save For Web, в котором отобразится весь документ, включая слои. Чтобы настроить сжатие для слоя, выделите его с помощью инструмента Slice Select (Выбрать ломтик) слева в окне Save For Web, а затем измените параметры справа (см. Совет 142). Совет Если для создания страницы вы применяли ImageReady и уже настроили параметры сжатия, при переносе PSD-файла в программу GoLive эти настройки будут сохранены.
После завершения настройки параметров нажмите кнопку Save, чтобы сохранить файлы. В диалоговом окне Save вы заметите, что файл имеет расширение .data. После сохранения этого файла программа GoLive создаст папку, которая содержит файл settings.opt и изображения, полученные из «ломтиков» в PSD-файле (рис. 147.1). Если впоследствии понадобится изменить макет, дважды щелкните по объекту Smart, который вы добавили на страницу. Оригинальный PSD-файл откроется в Photoshop или ImageReady, и вы сможете его отредактировать. После сохранения PSD-файла программа GoLive обновит объект Smart, включая его слои. В программе GoLive можно изменить размеры изображения, обрезать его или настроить цвета, как и при работе с любым объекРис. 147.1. Программа GoLive том Smart. Однако вы не можете автоматически создает папку изменить таблицу, добавить текст с расширением .data, которая в любую ячейку или добавить в слои содержит файл настроек такие функции, как Actions. Мы советуем редактировать макет в программе Photoshop.
Интеграция в пакет Creative Suite
25.01.2006 2:20:45
201 СОВЕТ
148
Настройка текстовых переменных
Если вам приходилось использовать многослойный PSD-файл в качестве объекта Smart Object, а также добавлять текстовый слой в верхнюю часть файла Photoshop, скорее всего, вы видели диалоговое окно, которое показано на рис. 148.1. Диалоговое окно Variable Settings (Настройки переменных) позволяет настроить объект Smart Object без вызова программы, в которой файл был создан.
Использование типа Photoshop на пути Программа Photoshop CS2 включает возможность создания типа на пути (type on a path). Пока тип на пути является самым верхним текстовым слоем, либо пока он привязан в виде переменной, вы сможете настроить его в качестве новой переменной.
Рис. 148.1. Диалоговое окно Variable Settings
Используйте это диалоговое окно, чтобы изменять текстовые строки в PSD-файле. Выберите поле флажка рядом с опцией Topmost Textlayer (Самый верхний текстовый слой) и введите новый текст в появившемся поле. Когда вы нажмете кнопку OK, откроется окно Save For Web, и вы сможете сохранить веб-версию изображения, которая использует новую текстовую строку вместо оригинальной. Эта функция позволяет создавать группы заголовков, кнопок или других повторяющихся объектов, которым требуется одинаковый стиль. Кроме того, вы можете использовать данную функцию в случае, если хотите настроить для сайта шрифт, который не является стандартным вебшрифтом.
СОВЕТ 148: Настройка текстовых переменных
07_GoLive_T&T_(191-216)_rus.indd 201
25.01.2006 2:20:45
202 СОВЕТ
149 Тэги ALT из переменных Посмотрите на поле ALT Text (Текст ALT) в палитре Inspector, вы заметите, что текстовые данные переменной автоматически записываются в атрибут .
Преобразование текста в изображения
Программа GoLive позволяет преобразовать HTML-текст в графические объекты путем комбинирования технологий Smart Object и Variables. Таким образом, можно создавать кнопки навигации, графические подзаголовки и баннеры. Выполните следующие действия: 1. Создайте файл Photoshop, самым верхним слоем в котором является текст, либо выполните команду Image Variables Define (Изображение Переменные Определить) в Photoshop или ImageReady, чтобы привязать переменную к другому слою. 2. Сохраните файл Smart Object Source в папку SmartObjects окна Site. 3. Выделите HTML-текст в режимеLayout Editor и выполните команду Special Convert Text to Banner (Преобразовать Текст в баннер), как показано на рис. 149.1.
Рис. 149.1. Выделите текст в режиме Layout Editor и выполните команду Special Convert Text to Banner
4. Выберите нужный файл Smart Object Source в диалоговом окне Open и нажмите кнопку OK. 5. Обратите внимание: диалоговое окно Variables Settings автоматически копирует выделенный HTML-текст и применяет его к переменной Topmost Textlayer. При необходимости измените текстовую переменную, затем нажмите кнопку OK. Совет Видите небольшой красный символ 1 рядом с иконкой T? Этот символ помогает отличить верхний текстовый слой от других текстовых переменных.
ГЛАВА 7
07_GoLive_T&T_(191-216)_rus.indd 202
Интеграция в пакет Creative Suite
25.01.2006 2:20:45
203
6. Сохраните новый файл с помощью функции Save For Web (рис. 149.2) и переместите изображение в папку Site Root.
Рис. 149.2. HTML-текст будет сохранен в виде графического файла, содержащего различные эффекты, которые нельзя создать по средствам HTML и CSS
Удаление данных GoLive из файлов мультимедиа Данные по оптимизации и настройках хранятся в конечных файлах (GIF, JPEG, PNG, SWF и SVG), которые вы просматриваете в веббраузере. Эти данные несколько увеличивают конечные файлы (примерно на 100–300 байт), но никак не влияют на результат. Чтобы избавиться от ненужной информации, вы можете удалить ее с помощью опции Strip GoLive data from media files (Извлечь данные GoLive из файлов мультимедиа). Эта опция находится в меню Site Settings категории Upload/Export (Загрузить/экспортировать).
Совет Программа GoLive автоматически вводит название файла, которое основано в данных текстовой переменной.
7. Преобразование текста в баннер завершено. Если необходимо изменить параметры переменной, выделите изображение Layout Editor и нажмите кнопку Variables (Переменные) в палитре Inspector. Для того чтобы изменить графические заголовки или кнопки навигации вашего сайта, вам достаточно внести изменения в файл Photoshop (поменять цвет, выбрать другой шрифт, добавить тень и так далее), и все объекты Smart на вашем сайте будут автоматически обновлены.
СОВЕТ 149: Преобразование текста в изображения
07_GoLive_T&T_(191-216)_rus.indd 203
25.01.2006 2:20:45
204 СОВЕТ
150
Использование ImageReady CS2
В Совете 147 мы рассказали о том, как переместить макет с элементами Slices (Ломтики) на страницу GoLive. Однако существует и другой способ, который используется даже чаще. Открыв макет в ImageReady, выполните команду File Save Optimized As (Сохранить оптимизированный как). Откроется диалоговое окно Save. В нижней части окна имеется ниспадающий список Format (Формат), который предлагает опции: HTML and Images (HTML-код и изображения), Images Only (Только изображения) и HTML only (Только HTML-код), как показано на рис. 150.1.
Рис. 150.1. Выберите функцию Save Optimized As в меню File, чтобы получить доступ к опциям сохранения HTML-кода, изображений или и того, и другого
Вы можете изменить настройки в ниспадающем меню Settings и выбрать «ломтики» для сохранения в меню Slices. После этого нажмите кнопку Save и сохраните файл в папку Site Root программы GoLive. Совет Если во время вызова команды Save Optimized As вы выбрали «ломтики», в ниспадающем меню Slices вы увидите опцию Selected Slices (Выбранные ломтики).
Сохраненные файлы появятся на вкладке Files в окне Site после того, как вы нажмете кнопку Refresh (Обновить), см. Совет 18. Если вы сохранили HTML-код и изображения, дважды щелкните по HTML-странице, чтобы открыть ее в программе GoLive. Если вы сохранили только изображения, вы сможете переместить их на сайт, как и любые другие изображения. Вы можете использовать эту методику, если вы не планируете часто изменять макет сайта (см. Совет 147). Для создания панелей навигации, которые вы можете сохранить как компоненты в GoLive, скомбинируйте данную функцию с возможностью экспортирования только Slices из ImageReady.
ГЛАВА 7
07_GoLive_T&T_(191-216)_rus.indd 204
Интеграция в пакет Creative Suite
25.01.2006 2:20:45
205 СОВЕТ
151
Настройка переменных ImageReady SWF
Используя Adobe ImageReady CS2, вы можете добавить текстовую переменную в анимацию SWF (Flash-анимацию) и отредактировать текст после его размещения на странице GoLive. Это может оказаться очень полезным, например, в случае, если вы работаете с баннером, который имеет постоянный дизайн, но содержит изменяющийся текст. Выбрав текстовую переменную, вы можете изменить текст «Специальное предложение этой недели, 4 дня во Флориде всего лишь за 399 долларов!» на «Специальное предложение этой недели, 5 дней в Нью-Йорке всего лишь за 699 долларов!», не меняя при этом файл SWF.
Рис. 151.1. При импортировании в формат SWF выберите опцию Enable Dynamic Text, чтобы сделать текстовые переменные доступными для программы GoLive
СОВЕТ 151: Настройка переменных ImageReady SWF
07_GoLive_T&T_(191-216)_rus.indd 205
25.01.2006 2:20:45
206 Для этого создайте анимацию с текстовыми переменными в ImageReady и выполните команду File Export Macromedia Flash SWF. В открывшемся диалоговом окне Export выберите опцию Enable Dynamic Text (Активировать динамический текст), а также шрифты для добавления (рис. 151.1). После добавления текста на страницу GoLive отредактируйте его, выполнив следующие действия: 1. Выделите объект SWF на странице. 2. Щелкните по стрелке справа в поле File в палитре Inspector. 3. Выберите в списке пункт Edit. 4. В диалоговом окне Edit URL выберите опцию Query Parameter (Параметр запроса). 5. Измените текстовое значение (рис. 151.2). 6. Нажмите кнопку Update (Обновить). 7. Нажмите кнопку OK.
Рис. 151.2. Вы можете отредактировать текстовую переменную SWF с помощью диалогового окна Edit URL в программе GoLive
Теперь вернитесь на страницу и просмотрите анимацию. Оригинальный текст будет заменен текстом, который вы только что ввели.
ГЛАВА 7
07_GoLive_T&T_(191-216)_rus.indd 206
Интеграция в пакет Creative Suite
25.01.2006 2:20:45
207 СОВЕТ
152
Создание значков favicons
Вы когда-нибудь задумывались о том, как создать такие иконки, которые показаны на рис. 152.1?
Рис. 152.1. В GoLive CS2 вы можете создавать значки favicons
В связи с развитием рынка веб-браузеров, в последнее время многие веб-дизайнеры стали интересоваться подобными значками, которые называются favicons. Программа GoLive CS2 позволяет создавать и управлять такими значками, которые используются в адресной строке и закладках большинства современных веб-браузеров. Сначала создайте пиксельное изображение 16 × 16 в графическом редакторе, например, Photoshop или Illustrator. После этого добавьте изображение в папку SmartObjects на вкладке Extras окна Site. Обратите внимание на то, что вы не можете просто поместить на сайт изображение в формате GIF или JPEG и переименовать его в favicon.ico. В некоторых случаях у вас может все получиться, но, как правило, подобная методика не работает. Поверьте, мы это пробовали. Теперь выделите исходное изображение и выполните команду Site Smart Objects Create Smart Favorite Icon (Создать значок favicon). Программа GoLive конвертирует исходное изображение в формат .ico.
СОВЕТ 152: Создание значков favicons
07_GoLive_T&T_(191-216)_rus.indd 207
25.01.2006 2:20:45
208 После создания файла значка откроется диалоговое окно Settings, в котором вы сможете изменить ряд дополнительных опций. Формат.ico поддерживает изображения, различного размера и качества в одном файле. Следовательно, вы можете изменять качество, а, если исходный файл Photoshop содержит слои или группы слоев, вы можете даже создавать один значок с разными размерами. Если исходное изображение состоит только из одного слоя, выберите в ниспадающем меню в верхней части диалогового окна команду Use Single Image (Использовать единое изображение). После завершения изменений сохраните файл, назовите его favicon.ico, а затем перенесите в корневую папку вашего вебсайта. Помните о том, что файл favicon.ico является объектом Smart, а это значит, что при обновлении исходного файла программа GoLive обновит конечный файл favicon.ico автоматически. После загрузки файла favicon.ico в корневую папку вашего веб-сервера (см. Главу 11) большинство веб-браузеров смогут автоматически открывать значок при посещении сайта или добавлении его в закладки. Однако вы должны знать о том, что различные браузеры по-разному воспринимают данный эффект. К примеру, Microsoft IE 6.x для Windows не отобразит значок favicon в адресной строке до тех пор, пока URL-адрес не был добавлен в список Favorites, а Apple Safari не отобразит обновленную значок до тех пор, пока кэш браузера не будет очищен.
ГЛАВА 7
07_GoLive_T&T_(191-216)_rus.indd 208
Интеграция в пакет Creative Suite
25.01.2006 2:20:45
209 СОВЕТ
153
Создание PDF-галерей
Многие дизайнеры размещают на своих сайтах PDF-файлы. Если вы используете несколько PDF-файлов, скорее всего, придется задуматься о том, как настроить ссылки на них. Очень часто применяется следующая методика: вы создаете Thumbnails (Эскизы страниц) PDF-документа в программе GoLive и добавляете ссылку на оригинальный файл. Благодаря этому пользователи смогут получить предварительную информацию о документе. Создать эскизы страниц PDF-файла нетрудно. Переместите PDF-файл в Layout Editor. Если документ состоит из нескольких страниц, откроется диалоговое окно PDF Options (Параметры формата PDF) (рис. 153.1), в котором вас попросят выбрать страницу для эскиза.
Создание ссылок на оригинальный PDF-документ Добавив на страницу Thumbnail PDF-файла, выделите ее, щелкните по вкладке Link в палитре Inspector, а затем выберите оригинальный PDF-документ, чтобы создать ссылку.
Рис. 153.1. Выберите страницу PDF-документа, которую вы будете использовать при создании эскиза
Сделайте выбор и нажмите кнопку OK. Когда откроется окно Save For Web, сохраните изображение в формат GIF или JPEG и измените его размеры, если требуется. Совет Обязательно нажмите кнопку Apply в области Image Size перед тем, как нажимать клавишу Return/Enter. В противном случае, изменение размеров будет отменено.
Завершив изменение настроек, нажмите кнопку Save и сохраните изображение на сайте. Теперь посетителям не придется догадываться о том, что содержится в PDF-файле, потому что они увидят эскизы его страниц. Используя эту методику с несколькими PDF-документами, вы сможете быстро создать PDFгалерею.
СОВЕТ 153: Создание PDF-галерей
07_GoLive_T&T_(191-216)_rus.indd 209
25.01.2006 2:20:46
210 СОВЕТ
154
Обрезка объектов Smart
После добавления на страницу объекта Smart вы можете решить, что вам не нужно использовать изображение целиком. Например, вы можете использовать изображение Photoshop для печати в Adobe InDesign, а затем выбрать только часть изображения для вашего веб-сайта. Вместо того чтобы создавать две версии файла Photoshop, воспользуйтесь функцией обрезки GoLive, чтобы настроить конечный файл в соответствии с вашими требованиями. Выберите объект Smart в редакторе Layout Editor и активируйте инструмент Crop (Обрезать) в палитре Inspector. Когда вы выберете инстру0мент Crop, на палитре инструментов в верхней части экрана отобразится новый набор опций (рис. 154.1). Обрезать прозрачные пиксели слева, справа, сверху, снизу или со всех сторон Открыть палитру выравнивания Высота и ширина обрезки Горизонтальное и вертикальное положение обрезки
Опции масштабирования Использовать оригинальное изображение Отменить обрезку Принять обрезку
Рис. 154.1. Во время обрезки объекта Smart можно использовать инструменты на панели, чтобы добиться нужного результата. Например, вы можете обрезать только прозрачные пиксели с одной или нескольких сторон изображения
Щелкните и переместите курсор мыши по объекту Smart так же, как при работе в Photoshop. При перемещении курсора части изображения, которые вы обрезаете, будут выделены. Нажмите одну из кнопок на панели инструментов, чтобы обрезать прозрачные пиксели с любой стороны изображения. Если вы желаете выровнять обрезку с изображением, нажмите кнопку Open Align Palette (Открыть палитру выравнивания) на панели и воспользуйтесь палитрой Align (Выровнять). Ниспадающее меню Scaling (Масштабирование) содержит ряд полезных опций. К примеру, если вы хотите обрезать только части изображения, выберите опцию Keep Scaling (Сохранить масштабирование). Выберите опцию Keep Object Size (Сохранить размеры объекта), и вы сможете воспользоваться инструментом Crop, чтобы выделить область, которая соответствует текущим размерам объекта. Выберите опцию Scale to Source Size (Масштабировать по исходным размерам), чтобы выделить область инструментом Crop и визуализировать только данную область в соответствии с оригинальными размерами изображения. Вы можете подтвердить обрезку с помощью значка с галочкой на панели инструментов, отменить обрезку с помощью значка X на панели инструментов, либо изменить направление обрезки с помощью значка со стрелкой и кругом на панели инструментов. Помните: обрезка, которую вы выполняете здесь, влияет только на конечный файл; исходный файл остается неизменным.
ГЛАВА 7
07_GoLive_T&T_(191-216)_rus.indd 210
Интеграция в пакет Creative Suite
25.01.2006 2:20:46
211 СОВЕТ
155
Масштабирование объектов Smart
Когда вы масштабируете объекты Smart, удерживайте клавишу Shift, если вы хотите сохранить пропорции изображения (рис. 155.1). Эта функция клавиши Shift применяется практически в любом графическом редакторе в мире; результаты, как правило, совпадают. Рис. 155.1. Когда вы масштабируете объекты Smart, удерживайте клавишу Shift, если вы хотите сохранить пропорции изображения
Если вы масштабируете объекты Smart без сохранения пропорций, программа GoLive предлагает три уникальные опции масштабирования. Выбор опции зависит от структуры изображения, а также от того, как изображение сочетается с другими объектами на странице. Далее мы расскажем о трех опциях масштабирования в разделе Basic палитры Inspector: • Exact Fit (Точное соответствие). Используется по умолчанию. Эта опция настраивает точное соответствие между размерами изображения и его границами. Если объект Smart был масштабирован без сохранения пропорций, изображение будет искажено (рис. 155.2);
Рис. 155.2. Если вы воспользовались опцией Exact Fit, чтобы изменить масштаб изображения без сохранения пропорций, изображение будет искажено
СОВЕТ 155: Масштабированиеобъектов Smart
07_GoLive_T&T_(191-216)_rus.indd 211
25.01.2006 2:20:46
212 • No Border (Без границы). Если вы воспользуйтесь данной опцией для масштабирования объекта Smart с сохранением пропорций, не произойдет ничего необычного. Все будет намного интереснее, если вы выполните масштабирование без сохранения пропорций (от границы или угла без применения клавиши Shift). Опция No Border сохраняет пропорции изображения и заполняет все поле границы изображения графическими данными. Если пропорции не были сохранены, то лишние пиксели будут обрезаны (рис. 155.3). Эта опция очень удобна в случае, если вы хотите использовать текстовые переменные в качестве кнопок навигации в объектах Smart, а также выбрать изображения разного размера;
Рис. 155.3. Опция No Border обрезает данные изображения и сохраняет его пропорции
• Show All (Показать все). Данная опция пропорционально масштабирует изображение в заданных размерах и добавляет по краям прозрачные или матовые границы (рис. 155.4). Используйте эту функцию, если вы желаете уместить объект Smart в ячейку таблицы или в область шаблона, но не хотите при этом обрезать графические данные.
Рис. 155.4. Опция Show All сохраняет пропорции изображения, не обрезает пиксели и добавляет нужную заливку
ГЛАВА 7
07_GoLive_T&T_(191-216)_rus.indd 212
Интеграция в пакет Creative Suite
25.01.2006 2:20:46
213 СОВЕТ
156
Маскирование объектов Smart
Пробовали ли вы когда-нибудь удалить белую рамку, которая появляется вокруг прозрачных изображений? Обычно в стандартных графических редакторах это сделать сложно, но, используя объекты Smart Objects в GoLive, вы сможете добиться нужного результата. Добавьте на страницу исходный файл, который имеет прозрачный фон. Затем выберите поле Matte (Маскировать) в палитре Inspector и выберите цвет маски с помощью инструмента Eyedropper на палитре Color. Также вы можете выбрать образец цвета в палитре Swatches. Выбрав нужный цвет маски, нажмите кнопку Apply в палитре Inspector, чтобы применить данный цвет к изображению. На рис. 156.1 показано сравнение, которое показывает преимущество использования маскирования при удалении рамки. Видите белую рамку слева и четкую грань справа?
Один щелчок мыши Также для настройки матового цвета можно использовать контекстные меню. Выполните Ctrl+щелчок (Mac) или щелчок правой кнопкой мыши (Windows) на объекте Smart в редакторе Layout Editor и выберите нужную опцию в меню Set Matte Color (Настроить цвет маски). Выберите опцию Background (Фон), чтобы маскировать прозрачные области в соответствии с цветом фона веб-страницы, который указан в HTML-коде.
Рис. 156.1. Используйте функцию маскирования для объектов Smart, чтобы удалить белую рамку из прозрачных изображений
Маскирование функционирует в Adobe Photoshop, Illustrator, PDF-файлах, а также в файловых форматах, которые не поддерживают прозрачность, например, в JPEG. Совет Объекты Smart Illustrator, которые используют формат SVG или SWF для конечного файла, не поддерживают опции маскирования.
СОВЕТ 156: Маскирование объектов Smart
07_GoLive_T&T_(191-216)_rus.indd 213
25.01.2006 2:20:46
214 СОВЕТ
157 Обрезанные детали изображения являются объектами Smart Все детали изображения, которые вы обрезали, представляют собой объекты Smart. Это значит, что, если вы внесете изменения в файл отслеживающего изображения, все настройки обрезки будут обновлены автоматически. Данная функция позволяет вам быстро создавать новые дизайны.
Отслеживание изображений
Для создания макета новой страницы вы можете использовать функцию графического редактора, например, Photoshop или Illustrator. В дизайнерской студии вы можете поместить копировальную бумагу на макет и отследить его детали. Точно так же вы можете добавить изображение на фон в программе GoLive и отследить его детали. Такое изображение называется отслеживающим. Откройте палитру Tracing Image (Отслеживающее изображение) из меню Window, щелкните по полю флажка Source, а затем выделите отслеживающее изображение, которое вы хотите использовать для дизайна. Используя инструмент Hand на палитре (не на панели инструментов, так как это приведет к перемещению всей страницы), вы можете изменить положение отслеживающего изображения, а также его непрозрачность (рис. 157.1).
Рис. 157.1. Применяйте палитру Tracing Image, чтобы поместить изображение на фон страницы, а затем обрезать детали, которые вы желаете использовать
Начните обрезку. Выберите инструмент Crop на палитре Tracing Image, переместите курсор на нужную часть изображения и нажмите кнопку Cut Out (Вырезать). Когда вы отрезаете часть отслеживающего изображения, открывается окно Save For Web, в котором вы настраиваете параметры сжатия, а также сохраняете полученное изображение на вашем сайте. Отрезанные детали автоматически размещаются в слоях CSS, которые вы можете переместить, чтобы изменить дизайн. Завершив обрезку, отключите отслеживающее изображение. Для этого удалите галочку из поля флажка Source на палитре Tracing Image.
ГЛАВА 7
07_GoLive_T&T_(191-216)_rus.indd 214
Интеграция в пакет Creative Suite
25.01.2006 2:20:46
215 СОВЕТ
158
Организация Smart Objects
Мы уверены в том, что Smart Objects сэкономят настолько много вашего времени, что вы будете использовать их максимально часто. Управление файлами в папке SmartObjects может оказаться сложной задачей. Чтобы упростить ее решение, создайте вложенные папки в папке SmartObjects на вкладке Extras окна Site. Выберите папку SmartObjects на вкладке Extras окна Site и щелкните по значку New Folder (Новая папка) на панели инструментов, чтобы создать вложенную папку (рис. 158.1). Обратите внимание: вы можете создавать вложенные папки внутри других вложенных папок. Введите описательные названия для новых папок и организуйте их так, как удобно вам.
Рис. 158.1. Пользуйтесь вложенными папками, чтобы организовать файлы Smart Object Source
Сохраняя файлы Source в окне Site, вы передаете функцию управления ими программе GoLive и получаете доступ к дополнительным и очень мощным средствам контроля. К примеру, вы можете создавать отдельные папки для различных типов файлов (Photoshop, Illustrator и PDF). Также вы можете организовать файлы по разным этапам цикла редактирования (оригиналы, отредактированные файлы и конечные файлы).
СОВЕТ 158: Организация Smart Objects
07_GoLive_T&T_(191-216)_rus.indd 215
25.01.2006 2:20:46
216 СОВЕТ
159
Обновление страниц с помощью Smart Objects
Обычно программа GoLive автоматически обновляет страницы, которые используют такие объекты, как шаблоны и компоненты. Иногда вам приходится выполнять некоторые обновления вручную. Например, если вы изменяете макет InDesign или объект Smart на закрытой странице, вы можете заставить программу GoLive обновить все зависимые страницы без команды меню. Откройте окно Site и выполните команду Site Update Files Dependant on Site Extras (Зависимые от вкладки Extras окна Site). Программа GoLive проверит все объекты Site Extras (шаблоны, компоненты, отрезки, объекты Smart и пакеты InDesign) и при необходимости обновит все страницы сайта (рис. 159.1). Также вы можете нажать соответствующую кнопку на панели инструментов.
Рис. 159.1. В окне Site вы можете принудительно обновить страницы с объектами Smart и другими элементами Site Extras
Чтобы принудительно обновить страницы на основе определенного объекта Smart, выделите файл на вкладке Extras окна Site и выполните команду Site Update Files Dependant On Selection (Файлы в зависимости от выделения).
ГЛАВА 7
07_GoLive_T&T_(191-216)_rus.indd 216
Интеграция в пакет Creative Suite
25.01.2006 2:20:46
217
ГЛАВА 8
Процесс взаимодействия между программами InDesign и GoLive Некоторые дизайнеры постоянно пытаются использовать данные повторно или добавлять изображения на разные страницы. Сейчас веб-дизайнеров настойчиво заставляют создавать веб-сайты, которые поддерживают печать, размещение в сети Internet, преобразование в формат PDF, отправку по электронной почте и демонстрацию на мобильных устройствах. Пакет Creative Suite 2 предлагает уникальную возможность: вы можете взять документ, созданный в InDesign CS2 и использовать данные с одной или нескольких страниц (и даже весь документ целиком) на вашем веб-сайте. В GoLive CS2 появилась новая функция, которая позволяет открыть пакет InDesign и экспортировать его содержимое в HTML-код. Разумеется, настройка макета страницы из другой программы для сети Internet – это далеко не то же самое, что подготовка макета исключительно для веб-сайта. Однако в данной главе вы узнаете, как можно минимизировать это различие.
08_GoLive_T&T_(217-240)_rus.indd 217
26.01.2006 0:33:35
218 СОВЕТ
160
От InDesign к GoLive
Программы InDesign CS и GoLive CS предлагают абсолютно новый подход к настойке данных на веб-странице для печати, который называется Package for GoLive and Import from InDesign (Упаковать для GoLive и импортировать из InDesign). Например, вы можете настроить макет для печати в InDesign CS и применить функцию Package for GoLive, чтобы преобразовать данный макет в формат GoLive. Это значит, что вам не придется выполнять никакх специальных действий (к примеру, добавлять тэги или изменять структуру документа). Когда вы завершите формирование макета для сети Internet, выполните команду File Package for GoLive в программе InDesign CS (рис. 160.1). Откроется диалоговое окно Package for GoLive, в котором вы увидите опции для настройки пакета InDesign. В верхней части окна вы можете выбрать для упаковки весь документ или отдельные страницы (см. Совет 162). Внизу вы можете активировать настройку добавления изображений и файлов мультимедиа. Сделав выбор, нажмите кнопку Package (Упаковать). Программа InDesign экспортирует текст в файлы XML, сохранит изображения и файлы мультимедиа во вложенные папки и добавит PDF-файл, содержащий оригинальный дизайн.
Рис. 160.1. В диалоговом окне Package for GoLive вы выбираете части документа, которые будут перенесены в программу GoLive
В средней части диалогового окна Package имеется опция, которая автоматически открывает окно после завершения экспорта. Если вы не активировали данную опцию во время упаковки документа, вы сможете открыть окно Package из меню GoLive. Выполните команду File Import From InDesign
ГЛАВА 8
08_GoLive_T&T_(217-240)_rus.indd 218
Процесс взаимодействия между программами InDesign и GoLive
26.01.2006 0:33:37
219
(Из InDesign) и найдите созданную вами папку InDesign Package. В ней вы найдете файл с расширением .idpk. Дважды щелкните по файлу, чтобы импортировать его содержимое в программу GoLive. Когда вас спросят, желаете ли вы копировать пакет на сайт, нажмите кнопку Yes. Программа GoLive скопирует пакет в папку InDesignPackages на вкладке Extras в окне Site и откроет режим по умолчанию для окна Package. С помощью кнопок в нижнем правом углу вы можете изменить масштаб и номер страницы (рис. 160.2).
Настройка пакета с использованием слоев В CS-версиях программ InDesign и GoLive скрытые слои не экспортировались в пакет GoLive Package. В версиях CS2 вы можете отметить поле флажка в окне Package for GoLive, чтобы добавить скрытые слои. Открыв пакет в программе GoLive, вы сможете активировать слои в палитре Layers.
Рис. 160.2. В окне Package отображается оригинальный макет InDesign в виде PDF-документа
Если вы планируете повторно использовать отдельные элементы документа InDesign (но не целые страницы), создайте в программе GoLive веб-страницу с нужными дизайном и навигацией, оставив на ней свободное место для текста, изображений и видео, которые вы импортируете из InDesign Package. Впоследствии вы можете применить шаблоны GoLive для упрощения обновлений сайта. Обратите внимание: если вы поместите курсор мыши на текст или изображения в окне Package, они будут выделены. Выделение обозначает, что вы можете переместить данный объект на веб-страницу (см. Советы 167 и 168).
СОВЕТ 160: От InDesign к GoLive
08_GoLive_T&T_(217-240)_rus.indd 219
26.01.2006 0:33:37
220 СОВЕТ
161
Выборочная упаковка элементов из программы InDesign
Как мы говорили в Совете 160, вам не нужно пакетировать весь документ InDesign, если вы не собираетесь использовать его целиком. Выбрав в меню File программы InDesign команду Package for GoLive, вы сможете экспортировать несколько страниц или только выделенные объекты. Чтобы выбрать диапазон страниц, например, страницы 3-6, введите в поле Range (Диапазон) значение 3–6. Чтобы выбрать отдельные страницы, разделите их номера запятыми (например, 3, 5, 7). Если необходимо выбрать диапазон страниц и отдельные страницы, можно использовать обе методики (рис. 161.1).
Рис. 161.1. В диалоговом окне Package for GoLive вы можете выбрать отдельную страницу, диапазон страниц или и то, и другое
Если вы хотите упаковать несколько элементов на странице, выберите их в документе InDesign и выполните команду File Package for GoLive. Программа InDesign автоматически активирует опцию Selected в диалоговом окне Package for GoLive. Если вы передумаете и решите упаковать весь документ или страницу, вы сможете изменить выбор опцией перед тем, как нажимать кнопку Package (рис. 161.2). Рис. 161.2. Если до вызова команды Package for GoLive вы выделили элементы на странице, программа InDesign активирует опцию Selected в диалоговом окне Package for GoLive
ГЛАВА 8
08_GoLive_T&T_(217-240)_rus.indd 220
Процесс взаимодействия между программами InDesign и GoLive
26.01.2006 0:33:37
221 СОВЕТ
162
Экспорт страниц в формате HTML
Теперь программа GoLive CS2 включает возможность открыть публикацию InDesign в GoLive с последующим экспортом в формат HTML. Вы можете экспортировать весь документ в виде группы страниц или выделять отдельные страницы из пакета. Если вы хотите выполнить стандартное преобразование, выберите в меню Package команду Export to HTML (Экспортировать в формат HTML), рис. 162.1. Откроется диалоговое окно экспорта.
Рис. 162.1. В плавающем меню вы можете экспортировать страницы в формат HTML
Если вы хотите отредактировать и просмотреть страницы до экспорта, щелкните по вкладке HTML Preview (Просмотр HTML-кода) в окне Package. В режиме HTML Preview вы увидите новую группу инструментов оптимизации страницы в верхней части экрана (рис. 162.2).
Рис. 162.2. Воспользуйтесь панелью инструментов для настройки параметров экспорта в формат HTML
Слева находится ползунок Layout Scale (Масштаб макета). При перемещении ползунка будет изменен масштаб объектов на странице. Данная функция позволяет представить, как должна выглядеть страница после экспортирования в формат HTML. Изменение масштаба повлияет на макет страницы. Кнопка Optimize (Оптимизировать) позволяет программе GoLive подобрать макет самостоятельно, а опция Apply to All Pages (Применить ко всем страницам) использует одинаковый масштаб на всех страницах документа. Благодаря нашему опыту мы сделали вывод, что оптимального результата можно добиться путем комбинирования работы с ползунком и просмотра каждой страницы по отдельности. После завершения оптимизации нажмите кнопку Export to HTML справа на панели инструментов (см. Совет 163).
СОВЕТ 162: Экспорт страниц в формате HTML
08_GoLive_T&T_(217-240)_rus.indd 221
26.01.2006 0:33:37
222 СОВЕТ
163 Шаблон, содержащий ссылки Previous и Next Чтобы использовать ссылки Previous и Next, вы должны выбрать соответствующий шаблон, созданный командой Package. Вы сможете найти страницу шаблона в папке Accessories и изменить ее любым способом. Но не следует редактировать содержимое файла, чтобы не потерять ссылки Previous и Next.
Настройка функции HTML Export
Если вы нажмете кнопку Export to HTML на панели инструментов или выберите в меню Package пункт Export to HTML (см. Совет 162), откроется диалоговое окно Export. В этом диалоговом окне вы можете выбрать опцию для экспорта текущей страницы, диапазона страниц или всего документа. Для экспорта текущей страницы или всего документа воспользуйтесь соответствующим переключателем. Для экспорта диапазона страниц введите их номера, например, 3–5 или 2, 5, 7 (рис. 163.1). Если вы хотите связать страницы, пометьте поле флажка рядом с опцией Use Template (Использовать шаблон). Все страницы при этом будут перенесены в готовый шаблон, который включает ссылки Previous и Next, позволяющие перемещаться по экспортированным страницам (см. Примечание).
Рис. 163.1. В диалоговом окне Export as HTML можно выбрать одну или несколько страниц для экспорта
Когда вы нажмете кнопку OK, появится диалоговое окно Save, которое позволяет выбрать местоположение папки с экспортированными страницами. Программа GoLive самостоятельно вводит названия папок, используя названия пакетов InDesign. Сохраните папку в корневой папке вашего сайта. Программа GoLive экспортирует страницы и отобразит состояние процесса в диалоговом окне Exporting Pages (Экспорт страниц), как показано на рис. 163.2. Когда процесс будет завершен, нажмите кнопку OK.
Рис. 163.2. Вы увидите индикатор, показывающий процесс обработки страниц программой GoLive. Когда процесс будет завершен, нажмите кнопку OK, чтобы закрыть диалоговое окно
ГЛАВА 8
08_GoLive_T&T_(217-240)_rus.indd 222
Процесс взаимодействия между программами InDesign и GoLive
26.01.2006 0:33:37
223 СОВЕТ
164
Поиск и выбор объектов для упаковки
Откройте пакет InDesign в программе GoLive, и вы сможете выбирать объекты, задерживая на них курсор мыши в окне Package. Выделение цветом показывает, какие объекты вы можете перемещать. Иногда объекты в программе InDesign расположены таким образом, что выбрать их в окне Package оказывается непросто. Чтобы выделить перекрывающиеся объекты, выполните на них Ctrl+щелчок (Mac) или щелчок правой кнопкой мыши (Windows) на вкладке InDesign Layout окна Package и выберите нужный объект в меню Select (Выбрать). См. рис. 164.1.
Просмотр изображений Если вы нашли нужный файл изображения в списке Assets окна Package, дважды щелкните по имени файла, чтобы открыть его в режиме InDesign Layout. Это позволяет убедиться в том, что вы правильно выбрали изображение.
Рис. 164.1. Для выбора перекрывающихся объектов в окне Package воспользуйтесь контекстными меню
Также для выбора объектов в окне Package вы можете переключиться на вкладку Assets (Ресурсы), на которой отображается список всех текстовых данных, изображений и объектов мультимедиа. В этом списке вы можете выполнить поиск по имени файла. Выполните Ctrl+щелчок (Mac) или щелчок правой кнопкой мыши (Windows) на файле в списке Assets и выберите команду Reveal in InDesign Layout (Отобразить в окне InDesign), чтобы отобразить выбранный объект в окне Package. После выбора нужного объекта вы сможете переместить его из окна Package в программу InDesign (рис. 164.2).
Рис. 164.2. Список Assets позволяет вам найти объект по имени файла
СОВЕТ 164: Поиск и выбор объектов для упаковки
08_GoLive_T&T_(217-240)_rus.indd 223
26.01.2006 0:33:37
224 СОВЕТ
165 Сохранение размеров Функция просмотра эскизов изображений на вкладке Assets окна Package имеет еще одно преимущество. При добавлении эскизов на веб-страницу они сохраняют свои оригинальные размеры.
Просмотр эскизов страниц в списке Assets
Существует несколько способов просмотра изображений в окне Package, включая режим InDesign Layout и режим List (Список) на вкладке Assets. В GoLive CS2 появилась новая функция просмотра изображений: режим Thumbnail (Эскиз страниц) на вкладке Assets окнаPackage (рис. 165.1).
Рис. 165.1. Просмотр изображений в виде копий в окне Package
Откройте окно Package, переключитесь на вкладку Assets и щелкните по значку Thumbnail View в левом нижнем углу, чтобы отобразить изображения в виде эскизов. Пролистайте список текстовых данных, потому что они представляют собой XML-файлы, которые не имеют значков. Когда вы перейдете в раздел Images, вы увидите эскизы всех изображений. Вам будет намного проще найти нужное изображение по его эскизу, так как не понадобится переключаться между страницами или просматривать длинные списки файлов.
ГЛАВА 8
08_GoLive_T&T_(217-240)_rus.indd 224
Процесс взаимодействия между программами InDesign и GoLive
26.01.2006 0:33:38
СОВЕТ
166
Использование слоев InDesign для настройки веб-дизайна
Большинство дизайнеров используют слои в программе Photoshop, но функция работы со слоями в такой программе, как InDesign, известна далеко не каждому. Настоятельно рекомендуем использовать слои в InDesign, так как это позволит получить дополнительные преимущества. К примеру, вы сможете создавать документы на нескольких языках, устранять проблемы с прозрачностью объектов и облегчать доступ к проектам для ваших коллег и других пользователей. Если этого недостаточно, отметим, что применение слоев в InDesign существенно упрощает процесс конвертирования дизайна в веб-страницу в GoLive CS2. Если вы планируете настроить документ InDesign для сети Internet, обязательно добавьте в него слои. Например, вы можете создать два слоя: один для текста, а другой – для изображений. После пакетирования документа InDesign (см. Совет 160) откройте окно Package в программе GoLive. Затем откройте палитру Layers, чтобы просмотреть оригинальные слои InDesign. Щелкайте по иконкам на палитре Layers, чтобы активировать настройки видимости для слоев в окне Package. Это позволит выбрать отдельные слои и перенести их на веб-страницу (рис. 166.1).
225
Скрываем основные элементы страницы Также вы можете использовать слои InDesign для того, чтобы поместить все основные элементы страницы в один слой. После этого вы сможете одним щелчком мыши отключить все основные элементы страницы (верхние и нижние колонтитулы и номера страниц), которые не нужны для вебстраницы.
Рис. 166.1. Пустые белые области на данной странице представляют собой фотографии. Мы временно скрыли их с помощью палитры Layers программы Goive
СОВЕТ 166: Использование слоев InDesign для настройки веб-дизайна
08_GoLive_T&T_(217-240)_rus.indd 225
26.01.2006 0:33:38
226 СОВЕТ
167
Перемещение из программы InDesign текста, таблиц, изображений и фильмов
Вы можете перемещать объекты из окна Package программы InDesign в GoLive с помощью мыши. В данном совете мы дадим вам ряд рекомендаций.
Текст и таблицы Перемещая текст из окна Package в редактор Layout Editor программы GoLive, вы создаете XML-компоненты (рис. 167.1). XMLкомпоненты аналогичны обычным компонентам, следовательно, вы можете обновлять веб-страницы в соответствии с обновлениями в документах InDesign (см. Совет 174). Если текст InDesign занимает несколько фреймов или страниц, он будет полностью перемещен в GoLive из вкладки Assets окна Package. Данная функция позволяет сэкономить много времени по сравнению с обычной методикой (использованием команд Copy и Paste). Если вы переместите текстовый фрейм из окна InDesign Layout, будет добавлен только этот фрагмент текста, но вы увидите иконку с красным символом (+) перед компонентом или после него. Эта иконка показывает, что необходимо убедиться, что вы переместили все необходимые фрагменты текста. Таблицы InDesign перемещаются аналогичным способом; они добавляются в GoLive в виде HTML-таблиц компонентов.
Рис. 167.1. Для перемещения объектов InDesign на вебстраницы программы GoLive достаточно воспользоваться мышью
ГЛАВА 8
08_GoLive_T&T_(217-240)_rus.indd 226
Процесс взаимодействия между программами InDesign и GoLive
26.01.2006 0:33:38
227
Изображения Переместите изображение на веб-страницу из окна Package, и оно будет конвертировано в веб-формат в соответствии с настройками конвертирования на палитре Inspector. Если вы хотите изменить параметры изображения, не пользуясь при этом палитрами оптимизации, выделите изображение в окне Package и выберите команду Open Save For Web Dialog (Открыть диалоговое окно Save For Web) в ниспадающем меню Web Format (Веб-формат) в нижней части палитры Inspector. Теперь при перемещении данного изображения в редактор Layout Editor вы сможете выбрать соответствующий формат, изменить параметры конвертирования или изменить размеры изображения. Затем нажмите кнопку Save (см. Совет 142). Когда вы перемещаете изображение с вкладки InDesign Layout окна Package на вашу веб-страницу, вы заметите, что изображение кажется очень маленьким. Размеры конечного файла соответствуют размерам изображения в окне Package; для увеличения размеров изображения измените масштаб просмотра в окне Package. Одна из особенностей взаимодействия программ InDesign и GoLive состоит в том, что CMYK-изображения автоматически конвертируются в формат RGB, а изображения с высоким разрешением преобразуются в изображения с разрешением 72 dpi. Программа GoLive CS2 автоматически создает папку Accessories для каждого изображения, с которым вы работаете. Программа GoLive использует данную папку как папку по умолчанию для сохранения всех изображений, фильмов и внешних CSS-таблиц. Данные функции максимально упрощают конвертирование документов InDesign в веб-формат.
Фильмы и звук Программа InDesign CS2 позволяет добавлять на веб-страницы различные файлы мультимедиа (например, фильмы в формате QuickTime). Чтобы использовать фильм или звуковой файл из окна Package, переместите его в редактор Layout Editor так же, как любое изображение. Объекты Smart не функционируют с видеофайлами, потому что они имеют значительные размеры и используют другие настройки конвертирования. Если необходимо изменить размеры или параметры видео файла, обратитесь к исходной программе; не пользуйтесь редактором Layout Editor.
СОВЕТ 167: Перемещение из программы InDesign текста, таблиц, изображений и фильмов
08_GoLive_T&T_(217-240)_rus.indd 227
26.01.2006 0:33:38
228 СОВЕТ
168 Управление параметрами пакетирования В GoLive CS2 появилась новая функция: вы можете выбрать несколько текстовых фрагментов или изображений и одновременно изменить их параметры конвертирования. Если вы хотите начать с нуля, выберите в плавающем меню окна Package команду Delete InDesign Package Preferences (Удалить параметры пакетирования InDesign). Параметры конвертирования будут обнулены для всех объектов в окне Package.
Настройка параметров конвертирования текста
Когда вы перемещаете текст или изображение из окна Package, программа GoLive выполняет ряд расчетов, которые позволяют ей определить, как вы собираетесь использовать данный объект. В большинстве случаев программа не допускает ошибки; однако время от времени вам придется самостоятельно изменять параметры конвертирования в окне Package. По умолчанию текст преобразуется в XML-компонент в формате Adobe InCopy. Данный формат необходим для большинства пользователей, он позволяет автоматически обновлять веб-страницы GoLive в соответствии с изменениями в документах InDesign (см. Совет 174). Если вы хотите разорвать связь между документом InDesign и веб-страницей, либо отредактировать или стилизовать текст в GoLive, можно добавить текст как обычный текст, а не как XML-компонент. Выделите текст в окне InDesign Layout или на вкладке Assets в окне Package и воспользуйтесь командой Insert As (Вставить как) на палитре Inspector. Вы сможете добавить текст как редактируемый текст, компонент или изображение (рис. 168.1).
Рис. 168.1. Измените параметры конвертирования текста на палитре Inspector, чтобы настроить процесс конвертирования текста InDesign в формат HTML или CSS
Чтобы добавить текст как обычный текст без стиля, уберите флажок из поля Use CSS Styles (Использовать CSS-стили) на палитре Inspector. Если вы хотите сохранить форматирование текста, выберите опцию Use CSS Styles и выполните команду Internal (Встроенные) или External (Внешние), чтобы указать, какие CSS-стили вы хотите сохранить. Выберите опцию None (Нет) только в том случае, если вы уже создали CSS-стили вручную.
ГЛАВА 8
08_GoLive_T&T_(217-240)_rus.indd 228
Процесс взаимодействия между программами InDesign и GoLive
26.01.2006 0:33:38
СОВЕТ
169
Конвертирование текстовых стилей InDesign в формат CSS
Когда вы перемещаете текстовые фрагменты из окна Package на веб-страницу, можно воспользоваться форматом CSS для конвертирования символов, абзацев и вложенных стилей. Эта функция позволяет без дополнительных усилий добиться визуальной идентичности для документов InDesign и веб-страниц. Помните о том, что некоторые функции InDesign (например, смещение основного шрифта, отслеживание, кернинг, выделение и оптическое выравнивание полей), нельзя сохранить на веб-странице, потому что они не имеют аналогов в CSS. Сначала выделите текст в окне Package и посмотрите на палитру Inspector (рис. 169.1). Чтобы конвертировать текстовые стили InDesign в CSS-стили, выберите опцию Use CSS Styles. Затем выберите команду None, Internal CSS или External CSS в ниспадающем меню CSS Style Definition (Определение CSS-стиля). Скорее всего, вам не понадобится выбирать опцию None, так как при этом стили настроены не будут. Вы можете выбрать команду Internal CSS, однако в результате CSS-стили будут созданы для каждой страницы отдельно, а это усложнит обновление страниц. Рекомендуем выбрать опцию External CSS и воспользоваться файлом default.css из окна InDesign Package. Теперь при добавлении текста InDesign на веб-страницы GoLive файл external.css из папки Accessories (см. Совет 167) будет использоваться в качестве таблицы стилей для всех объектов пакета; программа GoLive автоматически создаст ссылку на файл .css.
229
Настройка команды Package CSS Функция автоматической настройки одного внешнего CSS-файла для всех объектов в пакете InDesign очень удобна. Однако параметры шрифтов в CSS могут ссылаться на шрифты в документе InDesign, которые далеко не всегда совпадают с обычными веб-шрифтами. Чтобы решить эту проблему , выполните команду Package CSS Edit в меню Package и измените параметры шрифтов.
Рис. 169.1. Сохраните параметры стилизации текста; это позволит пакетам InDesign использовать внешнюю таблицу стилей
СОВЕТ 169: Конвертирование текстовых стилей InDesign в формат CSS
08_GoLive_T&T_(217-240)_rus.indd 229
26.01.2006 0:33:38
230 СОВЕТ
170
Распределение крупных текстовых фрагментов между несколькими веб-страницами
В программе InDesign текстовый фрагмент (story) представляет собой текст, который проходит через несколько текстовых фреймов. Вы можете создать очень короткий текстовый фрагмент, который начинается и заканчивается в одном текстовом фрейме, а также очень крупный текстовый фрагмент, занимающий несколько фреймов и страниц. Если вы хотите поместить крупный текстовый фрагмент на веб-страницу в GoLive и распределить текст между несколькими страницами, вы можете воспользоваться функцией Text Crop (Обрезка текста) в окне InDesign Package. Это позволит сохранить стилизацию текста из InDesign, а также изменить дизайн и настройки текста. Сначала мы рассмотрим процесс перемещения текста из окна Package на страницу GoLive. Представьте себе документ с тремя столбцами из InDesign, который был добавлен в пакет и открыт в программе GoLive. Если вы оставите три столбца на веб-странице, это вынудит пользователя выполнять неудобную прокрутку. Если вы перемещаете только один столбец из вкладки Layout окна Package на страницу GoLive, в результате на странице появляется лишь текст из столбца. Если вместо этого вы переместите весь фрагмент из вкладки Assets окна Package, текстовый фрагмент будет перемещен целиком. Почему был перемещен текст из всех столбцов, но не из всего фрагмента? Ответ прост: текст был обрезан. Допустим, что вы хотите взять главу из данной книги (один текстовый фрагмент), упаковать ее в InDesign и открыть в программе GoLive. Причем вы хотите разделить главу в GoLive на отдельные фрагменты (Советы) и поместить по одному фрагменту на каждую страницу. Далее мы покажем, как это сделать. Переместите фрагмент из вкладки Assets окна Package на страницу и воспользуйтесь инструментом Crop на палитре Inspector, чтобы выбрать часть фрагмента для одной страницы (рис. 170.1). В нашем примере мы выбрали текст, составляющий один Совет. Рис. 170.1. Переместите фрагмент из вкладки Assets окна Package на страницу GoLive и воспользуйтесь инструментом Text Crop на палитре Inspector, чтобы выбрать только те части фрагмента, которые вы хотите сохранить
ГЛАВА 8
08_GoLive_T&T_(217-240)_rus.indd 230
Процесс взаимодействия между программами InDesign и GoLive
26.01.2006 0:33:38
231
Выделив текст, щелкните по полю флажка на панели инструментов, чтобы подтвердить обрезку. Также вы можете щелкнуть по символу X, чтобы отменить обрезку, либо по символу в виде изогнутой стрелки, чтобы удалить обрезку (рис. 170.2). Рис. 170.2. После выбора инструмента Crop на палитре Inspector на панели инструментов отобразятся опции Remove Crop (Удалить обрезку), Cancel (Отменить) и Accept Crop (Принять обрезку)
В верхнем левом углу текстового поля вы увидите иконку, которая показывает, что текст представляет собой компонент (см. Совет 131), содержащий ссылку на оригинальный документ InDesign. Также вы увидите красный символ (+), который показывает, что фрагмент содержит текст, который не отображен в области обрезки (рис. 170.3). Рис. 170.3. Если вы обрезали текстовый компонент, в его верхнем левом и нижнем правом углах отобразятся красные символы (+)
Чтобы использовать часть фрагмента на другой странице, переместите фрагмент на нужную страницу и обрежьте его так, как требуется. В нашем примере мы воспользовались инструментом Crop, чтобы создать текстовые фрагменты из одной главы InDesign, а затем преобразовали их в Советы на разных веб-страницах GoLive.
СОВЕТ 170: Распределение крупных текстовых фрагментов между несколькими веб-страницами
08_GoLive_T&T_(217-240)_rus.indd 231
26.01.2006 0:33:38
232 СОВЕТ
171
Поиск задействованных объектов
Если вы добавили изображение из InDesign на одну или несколько страниц, и вам необходимо определить, на каких страницах они расположены, воспользуйтесь методикой, о которой мы расскажем в данном разделе. Откройте окно Package и найдите объект в режиме Layout или Assets. Выполните щелчок правой кнопкой мыши (Ctrl+щелчок в среде Mac) и выберите пункты меню Asset Open Related Smart Object Pages (Ресурс Открыть связанные страницы с объектами Smart). Обратите внимание на то, что каждый объект в меню пронумерован. Этот номер соответствует количеству страниц, на которых используется объект Smart. Если вы выберите данную команду, будут открыты все связанные страницы (рис. 171.1).
Рис. 171.1. Опции в контекстном меню упрощают поиск объекта в пакете
В этом контекстном меню также содержатся опции, позволяющие найти оригинальный объект в окне Site, в программе Bridge и в окне Finder (либо в окне Windows Explorer в среде Windows). Наконец, вы можете открыть объект в вашем веб-браузере по умолчанию, либо отредактировать его в оригинальной программе. Также вы можете открыть параметры объекта. Опция Show Properties (Показать параметры) открывает поле Get Info (Получить информацию) в окне Finder (Mac) или поле Properties в среде Windows.
ГЛАВА 8
08_GoLive_T&T_(217-240)_rus.indd 232
Процесс взаимодействия между программами InDesign и GoLive
26.01.2006 0:33:38
233 СОВЕТ
172
Использование XML-тэгов программы InDesign
Если ваш документ InDesign содержит XML-тэги, можно перенести их в окно GoLive Package. Если вы откроете пакет с файлом InDesign, содержащим тэги, то заметите четвертую вкладку в окне Package (рис. 172.1).
Рис. 172.1. Если вы откроете пакет с файлом InDesign, содержащим тэги, то заметите четвертую вкладку в окне Package
Если вам мешает выделение страницы с тэгами, можно его отключить (а затем снова отобразить) на палитре View (рис. 172.2).
Рис. 172.2. Вы можете отключить (а затем снова отобразить) выделение тэгов на палитре View
СОВЕТ 172: Использование XML-тэгов программы InDesign
08_GoLive_T&T_(217-240)_rus.indd 233
26.01.2006 0:33:39
234 Если вы создали страницу шаблона, содержащую области, названия которых полностью соответствуют названиям XMLтэгов, можно переместить их из вкладки XML окна Package в шаблон, и объекты будут автоматически распределены по областям. Вы можете одновременно перемещать несколько объектов, используя функцию распределения. Совет Применяйте данную методику только в том случае, если вы работаете с простыми XML-тэгами. Воспользуйтесь панелью Structure (Структура) в программе InDesign, чтобы убедиться в отсутствии вложенных тэгов.
После настройки параметров документа создайте пакет, откройте его в программе GoLive и выберите тэги на вкладке XML в окне Package. Переместите тэги на страницу шаблона GoLive (рис. 172.3).
Рис. 172.3. Переместите XML-тэги из пакета на страницу шаблона GoLive в области с соответствующими названиями
ГЛАВА 8
08_GoLive_T&T_(217-240)_rus.indd 234
Процесс взаимодействия между программами InDesign и GoLive
26.01.2006 0:33:39
235 СОВЕТ
173
Добавление текста в виде изображений
Как правило, вы почти всегда будете добавлять текст InDesign в GoLive в виде текста. Но из любого правила есть исключения. Например, если вы не можете сохранить эффект тени в HTML и CSS, вы можете добавить текст в виде изображения. Придется пожертвовать возможностью редактирования текста и скоростью загрузки, но в итоге вы сможете полностью сохранить оригинальный дизайн. Чтобы добавить текст или таблицу из окна InDesign Package на веб-страницу в виде PDF Smart Object, выделите его в окне Package и выберите команду Snapshot Image (Копировать изображение) в ниспадающем меню Insert As на палитре Inspector (рис. 173.1).
Рис. 173.1. Если вы не можете восстановить текстовые эффекты с помощью HTML и CSS, добавьте текст в виде изображения
Вы можете управлять настройками оптимизации полученного изображения с помощью меню Web Format под палитрой Inspector. Список опций соответствует списку параметров оптимизации в диалоговом окне Save For Web; если вы хотите изменить настройки изображения самостоятельно, выберите опцию Open Save For Web Dialog. После завершения настройки сохраните полученное изображение в корневую папку веб-сайта. Объекты Smart, созданные из текста, будут обновляться так же, как и любые другие объекты Smart. Это значит, что, если вы добавите документ InDesign в другой пакет, ваши изображения будут обновляться автоматически (см. Совет 174).
СОВЕТ 173: Добавление текста в виде изображений
08_GoLive_T&T_(217-240)_rus.indd 235
26.01.2006 0:33:39
236 СОВЕТ
174 Пожалуйста, закройте пакет Если вы попробуете выполнить повторное пакетирование документа InDesign, не закрыв предварительно текущий пакет в программе GoLive, вы увидите сообщение об ошибке. Перед выполнением повторного пакетирования документа обязательно закройте текущий пакет.
Повторное пакетирование документов InDesign для GoLive
Очевидно, что функция Package, соединяющая возможности программ InDesign CS2 и GoLive CS2, позволяет добиться отличных результатов. Но что делать, если ваш клиент вдруг передумал? Начинать все заново? Конечно, нет! Внесите нужные изменения в InDesign CS и выполните повторное пакетирование файла с тем же названием. Используя команду File Package for GoLive, сохраните файл в той же папке (рис. 174.1).
Переключитесь в окно Site программы GoLive, выберите обновленный файл InDesign и выполните команду Site Update Files Dependant On Selection (Сайт Обновить Файлы в зависимости от выбора). Программа GoLive обновит все веб-страницы и настроит текст и изображения в соответствии с изменениями, которые вы выполнили в программе InDesign (рис. 174.2).
Рис. 174.2. Чтобы обновить веб-сайт, выполните повторное пакетирование документа в InDesign. Затем обновите соответствующие файлы в программе GoLive
ГЛАВА 8
08_GoLive_T&T_(217-240)_rus.indd 236
Процесс взаимодействия между программами InDesign и GoLive
26.01.2006 0:33:39
СОВЕТ
175
Автоматическое конвертирование в веб-страницу только текста
237
Иногда пользователей интересует наличие функции, которая позволяет быстро экспортировать в веб-формат только текст документа InDesign. В программе GoLive это можно сделать с помощью окна InDesign Package. Откройте пакет в GoLive, переключитесь в режим просмотра Assets и выберите все файлы в категории Stories (Текстовые фрагменты), как показано на рис. 175.1. Затем переместите все текстовые фрагменты на веб-страницу в программе GoLive; вы конвертировали весь текст документа InDesign в веб-формат одним щелчком мыши!
Рис. 175.1. Чтобы конвертировать текст в веб-формат, переместите все текстовые фрагменты из окна Package на веб-страницу
По умолчанию программа GoLive конвертирует все текстовые фрагменты в XML-компоненты. Если вы хотите отредактировать текст после добавления в программу GoLive, выполните конвертирование в редактируемый текст. Выберите пункты меню Special Component Detach All Components (Извлечь все компоненты), чтобы разорвать связь между окном InDesign Package и вебстраницей. Это позволит редактировать текст любым способом. Если вы заметите, что приходится регулярно повторять одни и те же действия, вы можете настроить программу GoLive на автоматическое конвертирование текстовых фрагментов в обычный текст. Выберите все текстовые фрагменты в окне Package и настройте функцию Insert As на палитре Inspector на Editable Text (Редактируемый текст), как показано на рис. 175.2. Также вы можете выбрать для текста форматирование с использованием встроенных CSS-таблиц, внешних CSS-таблиц или без стилей.
Рис. 175.2. Перед перемещением текстовых фрагментов измените параметры конвертирования текста на палитре Inspector
СОВЕТ 175: Автоматическое конвертирование в веб-страницу только текста
08_GoLive_T&T_(217-240)_rus.indd 237
26.01.2006 0:33:39
238 СОВЕТ
176
Извлечение добавленных текстовых компонентов
Когда вы добавляете на веб-страницу текст из окна InDesign Package, его копия используется программой GoLive в виде XML-компонента. Это позволяет значительно упростить процесс обновления и одновременно усложняет редактирование и настройку стилей для текста в GoLive. Чтобы разорвать связь между компонентом и окном InDesign Package, выделите компонент в редакторе Layout Editor и выполните команду Special Component Detach Selected Component (рис. 176.1). Теперь вы сможете отредактировать и стилизовать текст в GoLive. Однако если вы выполните повторное пакетирование документа InDesign, извлеченный текст не будет обновлен автоматически.
Рис. 176.1. Вы можете редактировать и стилизовать выделенный компонент любым удобным способом
Если вы не хотите автоматически обновлять содержимое пакета, выполните команду Special Component Detach All Components (Извлечь все компоненты). Связи всех компонентов на открытой странице будут разорваны.
ГЛАВА 8
08_GoLive_T&T_(217-240)_rus.indd 238
Процесс взаимодействия между программами InDesign и GoLive
26.01.2006 0:33:39
СОВЕТ
177
Конвертирование в формат HTML с помощью Adobe Acrobat
239
Функция Package обеспечивает полное взаимодействие между программами InDesign CS2 и GoLive CS2 и предоставляет в ваше распоряжение мощные опции для настройки параметров текста и изображений в веб-дизайне. Разумеется, настройка дизайна веб-страниц займет определенное время. Мы предполагаем, что время от времени вам все же понадобится выполнить быстрое конвертирование без длительных настроек. В таких случаях можно использовать для конвертирования функции программ InDesign и Adobe Acrobat. Сначала экспортируйте документ InDesign в формат PDF. Настройте опцию PDF Compatibility (Совместимость с форматом PDF) в диалоговом окне PDF Export на 1.4 или выше, чтобы случайно не удалить отдельные изображения в документе. Откройте PDF-файл в Adobe Acrobat (не в Adobe Reader), выполните команду File Save As и выберите в меню Format опцию HTML 3.2 (использует тэги шрифтов) или HTML 4.0.1 (использует CSS-стили), как показано на рис. 177.1.
Рис. 177.1. Для сохранения PDF-документа из программы InDesign в формате HTML воспользуйтесь программой Adobe Acrobat
СОВЕТ 177: Конвертирование в формат HTML с помощью Adobe Acrobat
08_GoLive_T&T_(217-240)_rus.indd 239
26.01.2006 0:33:39
240 Конвертирование в формат HTML из программы Adobe Acrobat В зависимости от сложности документа, программа Adobe Acrobat может выполнить конвертирование успешно или, напротив, неудачно. Помните: формат InDesign и веб-формат очень сильно отличаются друг от друга; если вы хотите изменить значительное количество настроек, вернитесь к началу этой главы и воспользуйтесь опциями в окне InDesign Package.
Перед тем как нажать кнопку Save, нажмите кнопку Settings, чтобы изменить дополнительные параметры HTML-форматирования. Убедитесь в том, что опция Generate Images активна; также мы советуем воспользоваться опцией Subfolder (Вложенная папка), особенно если документ содержит большое количество изображений. Настройте формат изображения на JPEG, а разрешение – на 72 dpi; это позволит работать с небольшими файлами (рис. 177.2).
Рис. 177.2. Измените эти настройки перед тем, как сохранять файл в формате HTML из программы Adobe Acrobat
ГЛАВА 8
08_GoLive_T&T_(217-240)_rus.indd 240
Процесс взаимодействия между программами InDesign и GoLive
26.01.2006 0:33:39
241
ГЛАВА 9
Добавление интерактивности Всем нравятся интересные, хорошо организованные вебсайты, которые предлагают точную и актуальную информацию. Мы не задерживаемся долго на веб-сайтах, авторы которых хотели только продемонстрировать свои навыки HTML-программирования. Это совсем не значит, что авторы данной книги выступают против интерактивных веб-сайтов. Наоборот, удачно добавленные элементы интерактивности способы привлечь наше внимание к содержимому сайта. В этой главе мы рассмотрим различные способы добавления интерактивности на ваш веб-сайт. Мы расскажем о таких элементах, как эффекты Rollover, JavaScript Actions, QuickTime, Flash (SWF) и картах изображений (imagemaps). Следует лишь помнить, что интерактивность веб-сайта не должна быть бессмысленной. Если вы наполните страницы мигающими, плавающими и исчезающими объектами, это не увеличит вашу аудиторию. Напротив, в итоге вы можете лишиться многих посетителей. Перед добавлением элементов интерактивности тщательно подумайте. Спросите себя: «Сделает ли новая анимация мой сайт более интересным для аудитории?» Если ответ звучит как «нет» или даже «возможно», забудьте об этом. Если ответ звучит как «да», обратитесь к коллекции интерактивных инструментов программы GoLive.
09_GoLive_T&T_(241-274)_rus.indd 241
27.01.2006 3:18:02
242 СОВЕТ
178 Ниспадающие меню DHTML Если вы хотите создать строку навигации, которая сложнее, чем эффект Rollover, обратитесь к программе MenuMachine (см. Совет 237), позволяющей создавать ниспадающие меню DHTML. MenuMachine является весьма популярным расширением для программы GoLive, которое способно существенно облегчить вашу работу.
Создание эффектов Rollover
Даже на самых простых веб-сайтах часто встречается популярный эффект Rollover. Название говорит само за себя: если вы задерживаете на изображении курсор мыши, изображение определенным образом изменяется. Также данный эффект может активироваться при условии, что вы щелкаете по изображению или удаляете от него курсор мыши. Эффекты Rollover позволяют посетителям страницы понять, по каким объектам они могут щелкнуть, а также какие объекты важны. Выполните следующие действия: добавьте на страницу изображение, откройте палитру Rollovers из меню Window, выберите состояние Over (На) и щелкните по иконке New в нижней части палитры. Далее воспользуйтесь инструментом Fetch URL, чтобы привязать изображение к адресу в поле URL на палитре. Если вы хотите добавить другие состояния для эффекта (например, состояние Click – Щелчок), повторите эти действия. Когда вы привязываете к эффекту изображение, активируйте опцию Preload (Предварительная загрузка), и программа GoLive запишет кодировку JavaScript, которая автоматически загрузит все изображения после загрузки страницы в веб-браузере (рис. 178.1). Если вы не выбирали опцию Preload, изображение, связанное с состоянием Over, не загрузится до тех пор, пока посетитель не поместит на него курсор мыши. Вероятно, это приведет к возникновению ненужной задержки перед загрузкой второго изображения.
Рис. 178.1. На палитре Rollovers & Actions можно изменить состояния эффекта Rollover, а также сообщение о статусе
Также вы можете добавить сообщение о статусе, которое появляется в нижнем левом углу окна браузера в случае, если пользователь задерживает на нем курсор мыши. Выбрав состояние Over, щелкните по иконке Create New Message (Создать новое сообщение) и введите текст сообщения в поле Message в нижней части палитры Inspector.
ГЛАВА 9
09_GoLive_T&T_(241-274)_rus.indd 242
Добавление интерактивности
27.01.2006 3:18:06
СОВЕТ
179
Использование функции Automatic Rollover Detection
243
(Автоматическое распознавание эффектов Rollover)
Создавать эффекты Rollover нетрудно, но, если вы добавили на сайт большое количество таких эффектов или сложную строку навигации, результат может оказаться крайне негативным. Программа GoLive упрощает данный процесс с помощью функции, которая относится к числу наших любимых методик. Программу GoLive можно назвать «умной». Она может изучать новые функции, например, распознавать стиль, который вы используете при вводе названий файлов изображений, применяющихся в различных состояниях. Если вы «обучите» программу GoLive, она сможет автоматически сортировать все нужные изображения и записывать кодировку JavaScript, включая опцию Preload. Для этого выполните команду GoLive Preferences (Mac) или Edit Preferences (Windows) и выберите в категории Images слева пункт Rollover. Настройки эффекта Rollover распознают прописные и строчные буквы и поддерживают несколько уникальных систем ввода названий. Описание данной функции находится в нижней части диалогового окна Preferences (рис. 179.1). Настройки по умолчанию соответствуют параметрам Adobe ImageReady; вы можете добавлять новые настройки.
Рис. 179.1. Настройки распознавания эффектов Rollover позволяют «обучить» программу GoLive системе ввода названий для изображений
СОВЕТ 179: Использование функции Automatic Rollover Detection
09_GoLive_T&T_(241-274)_rus.indd 243
27.01.2006 3:18:06
244 Отключите функцию отображения палитры Каждый раз, когда вы используете функцию автоматического распознавания эффектов Rollover, автоматически открывается палитра Rollovers. Если вас это начало раздражать, просто отключите данную функцию в настройках программы. Если по какойлибо причине вы не хотите использовать функцию автоматического распознавания эффекта Rollover, вы можете отключить ее в разделе Rollovers параметров Image.
После «обучения» программы GoLive ваша задача максимально упростится. Переместите изображение с состоянием Normal в редактор Layout Editor, и программа GoLive автоматически найдет все изображения для различных состояний эффекта, запишет кодировку JavaScript, а также добавит кодировку опции Preload. Вы увидите все новые состояния эффекта
Рис. 179.2. После распознавания изображений эффекта Rollover программой GoLive вы увидите результаты и сможете настроить параметры на палитре Rollovers
Rollover в списке на палитре Rollovers (рис. 179.2). Если вы уже поместили на страницу изображение с состоянием Normal, вы все равно сможете автоматически распознать все прочие изображения эффекта Rollover. Выделите изображение в структуре страницы и выберите на палитре Rollovers опцию Detect Rollover Images (Распознать изображения с эффектом Rollover). Готово!
ГЛАВА 9
09_GoLive_T&T_(241-274)_rus.indd 244
Добавление интерактивности
27.01.2006 3:18:06
245 СОВЕТ
180
Использование эффектов JavaScript Actions
Использовать эффекты JavaScript в программе GoLive достаточно просто. Эффект JavaScript необходимо привязать к событию (например, к перемещению курсора мыши, нажатию клавиши на клавиатуре, открытию окна браузера и так далее). Чаще всего в качестве триггера для эффекта JavaScript применяется щелчок по ссылке. Выделите в редакторе Layout Editor текст или изображение для триггера и откройте палитру Actions (Действия) из меню Window. Слева располагается список событий, которые вы можете выбирать. Выберите событие (к примеру, Mouse Click – Щелчок мыши), нажмите кнопку New справа (рис. 180.1) и выберите действие в ниспадающем списке Action в нижней части палитры (рис. 180.2). Номера рядом с названиями действий показывают, с какой версией браузера (как минимум) совместимо данное действие. Если вы хотите ограничить список только теми действиями, которые совместимы с определенной версией браузера, выберите в плавающем меню команду Set Action Filter (Настроить фильтр действий). Рис. 180.1. Чтобы добавить новое действие, выберите его на палитре Actions и щелкните
Создание новых действий Если вы умеете работать с кодировкой JavaScript, вы можете создавать действия в программе GoLive самостоятельно. Указания по созданию новых действий вы найдете в файле SDK Programmers Guide. pdf, части руководства Software Development Kit (SDK), которое поставляется вместе с программой GoLive.
Настройте дизайн палитры Actions Разделители, которые располагаются между различными частями палитры, позволяют изменить ее дизайн. В результате вы получите доступ к новым событиям и опциям, предназначенным для создания сложных действий.
Рис. 180.2. Выберите действие в ниспадающем списке Action
СОВЕТ 180: Использование эффектов JavaScript Actions
09_GoLive_T&T_(241-274)_rus.indd 245
27.01.2006 3:18:06
246 СОВЕТ
181
Создание удаленных эффектов Rollover
Во время посещения веб-сайта вы можете поместить курсор мыши на текстовую ссылку или изображение и обнаружить, что данное изображение исчезло и появилось в другом месте на странице. Этот эффект называется удаленным эффектом Rollover; в программе GoLive он создается с помощью действия Set Image URL (Настроить URL-адрес изображения). Чтобы воспользоваться данным действием, вы должны создать как минимум два изображения одинакового размера (см. примечание). Поместите на страницу одно изображение (которое будет изменяться), выберите в ниспадающем списке Name/ID на вкладке Basic палитры Inspector пункт Name и введите название действия (рис. 181.1).
Рис. 181.1. Введите на палитре Inspector название для изображения, которое будет изменяться
Далее выделите изображение, которое будет использоваться в качестве триггера. Теперь привяжите действие Set Image URL из категории действий Image к изображению с событием Mouse с помощью палитры Actions. Совет В качестве триггера для действия Set Image URL можно также использовать текстовую ссылку или любой другой элемент, который принимает атрибут Name.
ГЛАВА 9
09_GoLive_T&T_(241-274)_rus.indd 246
Добавление интерактивности
27.01.2006 3:18:06
247
Выберите в ниспадающем меню Image название, которое вы привязали к первому изображению на странице. Воспользуйтесь инструментом Fetch URL, чтобы выбрать изображение, которое будет использоваться удаленно (рис. 181.2). Сохраните страницу и нажмите кнопку Preview, чтобы проверить действие.
Рис. 181.2. Выберите название изменяющегося изображения на палитре Actions; затем выберите другое изображение
Метки изображения При создании удаленных эффектов Rollover всегда следует выбирать изображения одинакового размера, чтобы не столкнуться с проблемой неправильной визуализации в некоторых устаревших браузерах. А что делать, если вы хотите поместить удаленное изображение в пустую часть страницы? Просто создайте пустое изображение с меткой в формате GIF (размеры этого изображения должны совпадать с размерами удаленного изображения). Также вы можете воспользоваться действием ShowHide (см. Совет 182).
Если хотите, вы можете создать еще одно действие Set Image URL и привязать его к событию Mouse Exit (Удаление курсора мыши). Это действие определяет, что должно произойти в случае, если вы удалите курсор мыши от триггера. Выберите название удаленного изображения и привяжите его к оригинальному состоянию с помощью инструмента Fetch URL.
СОВЕТ 181: Создание удаленных эффектов Rollover
09_GoLive_T&T_(241-274)_rus.indd 247
27.01.2006 3:18:07
248 СОВЕТ
182
Отображаем и скрываем слои
Один из полезных эффектов, которые можно создать с помощью GoLive Actions, – это возможность отображать или скрывать слои. К примеру, вы можете создать на странице текстовую ссылку, при щелчке по которой будет отображен скрытый слой с дополнительной информацией. В данном совете мы покажем, как это сделать. Выполните следующие действия, чтобы воспользоваться опцией Show/Hide: 1. Откройте пустую страницу и введите текст Hello. Выделите его и введите символ (#) в поле URL на панели Inspector, чтобы создать пустую ссылку. 2. Переместите слой на страницу, и вкладка Layer на палитре Inspector назовет его Greeting (рис. 182.1). Введите в слое текст Hello to you, too! на палитре Inspector уберите галочку из поля Visible (Видимый). Теперь слой будет скрыт.
Рис. 182.1. На палитре Inspector введите название слоя и сделайте его невидимым
3. Выберите слово ссылки Hello. На палитре Actions выберите действие Mouse Click, нажмите кнопку New, чтобы создать новое действие, и выполните команду Multimedia ShowHide в ниспадающем меню Action.
ГЛАВА 9
09_GoLive_T&T_(241-274)_rus.indd 248
Добавление интерактивности
27.01.2006 3:18:07
249
4. Выберите пункт Greeting в ниспадающем меню Layer, а также пункт Show в ниспадающем меню Mode (рис. 182.2).
Рис. 182.2. Выберите действие ShowHide, а также укажите слой, который хотите отобразить или скрыть
Другие опции Если вы хотите, чтобы слой отображался, когда вы помещаете курсор мыши на ссылку (а не щелкаете по ней), привяжите действие ShowHide к событию Mouse Enter. Затем вы сможете настроить дополнительное действие ShowHide для события Mouse Exit, которое скрывает слой.
Теперь нажмите кнопку Preview в верхней части страницы и щелкните по слову Hello. Скрытый слой отобразится, и вы увидите ответ. Все просто. Также в качестве режима вы можете выбрать Toggle; это позволит отображать и скрывать слой одним щелчком по ссылке.
СОВЕТ 182: Отображаем и скрываем слои
09_GoLive_T&T_(241-274)_rus.indd 249
27.01.2006 3:18:07
250 СОВЕТ
183 Закрываем окна Это действие проще всех. Чтобы закрыть страницу , добавьте ссылку с текстом «Закройте это окно». Затем привяжите действие Close Window к событию Mouse Click. Когда пользователь щелкнет по ссылке, окно будет закрыто.
Открываем новые окна
Небольшие окна, открывающиеся без предупреждения, очень раздражают; окно, которое открывается и отображает нужную пользователю информацию, может оказаться весьма эффективным решением. В данном Совете мы покажем, как создать такое окно. Выполните следующие действия: 1. Выделите текст и создайте пустую ссылку: введите символ (#) в поле URL палитры Inspector. Также вы можете настроить для ссылки изображение: выделите его и воспользуйтесь вкладкой Link на палитре Inspector. 2. Выберите на палитре Actions событие, которое вы хотите использовать в качестве триггера. В данном примере мы выбрали событие Mouse Click. 3. Нажмите кнопку New действие.
справа, чтобы создать новое
4. Выберите пункты Link Open Window (Ссылка Открыть окно) в ниспадающем меню Action. 5. Выберите параметры окна на палитре Actions. В данном примере мы создали окно размером 300 × 300 пикселей и отключили опцию Menu and Tools браузера (рис. 183.1).
Рис. 183.1. Настройте параметры ниспадающего окна на палитре Actions
ГЛАВА 9
09_GoLive_T&T_(241-274)_rus.indd 250
6. Создайте новое окно любого размера (вы можете использовать такие функции интерфейса браузера, как полосы прокрутки и меню). С помощью инструмента Fetch URL создайте ссылку на страницу, которая загрузится в новом окне. Вам понадобится просмотреть данное действие в браузере, так как функция Preview программы GoLive не откроет новое окно. Нажмите кнопку Preview in Browser (Просмотреть в браузере) на панели инструментов и щелкните по ссылке, чтобы открыть новое окно.
Добавление интерактивности
27.01.2006 3:18:07
251 СОВЕТ
184
Произвольная настройка изображений
Если для описания одного рисунка требуется тысяча слов, то сколько слов нужно для описания трех рисунков? Шести рисунков? Вместо того чтобы стараться выбрать одно идеальное изображение для веб-страницы, вы можете использовать несколько изображений и настроить программу GoLive на произвольное отображение одного из рисунков при посещении пользователем страницы. Для этого выполните следующие действия: 1. Добавьте на страницу базовое изображение. Если все изображения имеют одинаковые размеры, оставьте на панели Inspector опцию Pixels (В пикселях). Если изображения имеют разные размеры, измените настройку опции на палитре Inspector на Image. 2. Выделите изображение на странице и введите уникальное название на вкладке Basic палитры Inspector. Для простоты используйте в названии только буквы и цифры; помните о том, что название в поле Name не может начинаться с цифры (рис. 184.1).
Рис. 184.1. Введите на палитре Inspector название изображения; это позволит управлять им с помощью JavaScript Actions
3. Переместите объект Head Action из раздела Smart палитры Objects в раздел Head (см. Совет 36) вашей вебстраницы и откройте палитру Actions.
СОВЕТ 184: Произвольная настройка изображений
09_GoLive_T&T_(241-274)_rus.indd 251
27.01.2006 3:18:07
252 Шесть произвольных изображений Если вам недостаточно трех изображений, вы можете воспользоваться действием 6 Random Images Action (Шесть произвольных изображений), которое находится по адресу http://share.studio.adobe. com/axAssetDetailSubmit. asp?aID=3867. Убедитесь в том, что вы предварительно удалили действие Random Image. Это позволит избежать конфликтов.
4. Выделите объект Head Action, выберите в меню Events пункт On Load (При загрузке) и выполните команду Images Random Image (Изображения Произвольное изображение) в ниспадающем меню Action, как показано на рис. 184.2.
Рис. 184.2. Привяжите действие Random Image к событию On Load, чтобы произвольное изображение появлялось при загрузке страницы пользователем
5. Выберите три произвольных изображения и укажите их в нижней части палитры Actions (рис. 184.3).
Рис. 184.3. Привяжите произвольные изображения на палитре Actions
6. Чтобы увидеть эффект Random Image, просмотрите страницу на веб-браузере (см. Совет 94). Загрузите страницу несколько раз, чтобы просмотреть другие изображения.
ГЛАВА 9
09_GoLive_T&T_(241-274)_rus.indd 252
Добавление интерактивности
27.01.2006 3:18:07
253 СОВЕТ
185
Работа с двумя фреймами
Когда вы создаете ссылку на странице в группе фреймов, вы всегда привязываете конечный документ к ссылке, чтобы веббраузер «понимал», какой фрейм должна открывать ссылка (см. Совет 75). Обычно это работает, но что произойдет, если вы имеете дело с более сложной системой фреймов? Например, предположим, что вам необходимо, чтобы одна ссылка изменяла два фрейма (это позволяет одновременно обновлять фрейм навигации и фрейм содержания). Применяйте действие Target2Frames, чтобы одновременно обновлять два фрейма из одной ссылки. Выполните следующие действия: 1. Создайте группу из трех фреймов (как минимум) и введите уникальные названия для всех фреймов. 2. Выделите текст или изображение, которое вы хотите использовать, и привяжите ссылку с помощью иконки Link на панели инструментов .
Удалите этот фрейм Вы ждете, что два фрейма загрузятся в момент, когда пользователь щелкнет по ссылке. Также вы ждете, что ссылка удалится из группы фреймов. Чтобы заставить фрейм загружаться вне группы, но в одном окне, воспользуйтесь действием KillFrame в разделе Link ниспадающего меню Actions. Добавьте в ссылку действие, и вы достигнете нужного результата!
3. Откройте палитру Actions из меню Window, выберите событие Mouse Click слева и щелкните по иконке New Action (Новое действие) справа. Затем выберите в ниспадающем меню Action пункты Link Target2Frames. Обратите внимание: программа GoLive автоматически добавит в качестве конечного фрейма на палитре Inspector символ (#). Не изменяйте эту ссылку и не добавляйте новую ссылку, потому что действие создаст все нужные ссылки за вас. 4. Введите два фрейма и названия соответствующих страниц в нижней части палитры Actions (рис. 185.1).
Рис. 185.1. Настройте параметры действия на палитре Actions и протестируйте их в веб-браузере
5. Просмотрите группу фреймов в веб-браузере, чтобы проверить результат. Готово!
СОВЕТ 185: Работа с двумя фреймами
09_GoLive_T&T_(241-274)_rus.indd 253
27.01.2006 3:18:07
254 СОВЕТ
186 Веб-сайт Adobe Studio Exchange Вы найдете сотни действий от других компанийразработчиков на вебсайте http://share.studio. adobe.com. Многие действия поставляются бесплатно, некоторые имеют статус shareware, а некоторые являются платными коммерческими программами. Мы подробно поговорим о некоторых действиях в главе 13.
Поиск и установка новых действий
Действия GoLive Actions (встроенные скрипты Java, которые легко сконфигурировать в интерфейса GoLive) упрощают построение интерактивных деталей на вашем веб-сайте. Программа GoLive поставляется в комплекте с более чем 100 действиями. Действия могут быть как очень простыми (открыть новое окно, изменить статус), так и довольно сложными (записать cookie, создать пароль). Вы найдете действия в папке Adobe GoLive CS2:Modules: Jscripts:Actions; они разделены по вложенным папкам в соответствии с тем, какие задачи они решают (рис. 186.1).
Рис. 186.1. Действия располагаются во вложенных папках внутри папки Actions
Если вы загрузите дополнительное действие для программы GoLive, рекомендуем выбрать для установки вложенную папку и назвать ее, к примеру, Third Party. Это очень поможет во время обновления текущей версии программы GoLive. Понадобится только переместить вложенную папку Third Party из папки Actions, установить новую версию, а затем вернуть папку Third Party в папку Actions. Совет За дополнительной информацией по установке, устранению неполадок, обновлению и организации действий GoLive Actions мы советуем вам обратиться к руководству Мадса Расмуссена (Mads Rasmussen), «Adobe Golive Actions for Newbies». Вы найдете данное руководство по адресу: http://www.rasmussen.dk/newbies/index_ newbies_html.
ГЛАВА 9
09_GoLive_T&T_(241-274)_rus.indd 254
Добавление интерактивности
27.01.2006 3:18:07
255 СОВЕТ
187
Библиотека JavaScript Library
Исходная кодировка для каждого действия JavaScript Action, которую вы используете на своем веб-сайте, помещается во внешнюю библиотеку JavaScript, CSScriptLib.js. Программа GoLive автоматически создает файл, если вы используете на веб-странице эффект Rollover или действие. Данный файл библиотеки помещается в папку GeneratedItems на верхнем уровне вашего сайта и включает всю необходимую кодировку действий JavaScript, которая необходима для правильного функционирования сайта (рис. 187.1).
Рис. 187.1. Файл CSScriptLib.js способен существенно сократить время загрузки всего сайта
Другие веб-редакторы сохраняют кодировку JavaScript на каждой странице, а это может привести к возникновению неполадок. Использование внешней библиотеки JavaScript дает возможность избежать этого, поэтому страницы не будут перезагружаться при каждом использовании действия. Библиотека загрузит кодировку один раз, браузер считает ее, и страницы смогут открываться быстрее. Программа GoLive управляет всеми URL-адресами в папке JavaScript, поэтому вы можете перемещать и даже переименовывать страницы, а все связанные URL-адреса будут при необходимости обновляться. В предыдущих версиях программы GoLive содержалась кодировка JavaScript для каждого установленного действия, а не только для действия, которое использовалось. В результате вам приходилось удалять библиотеку при каждой загрузке сайта. Программа GoLive CS2 постоянно поддерживает библиотеку JavaScript и применяет только ту кодировку, которая требуется для действий на страницах сайта.
СОВЕТ 187: Библиотека JavaScript Library
09_GoLive_T&T_(241-274)_rus.indd 255
27.01.2006 3:18:08
256 Внимание! Прочтите всю информацию! TЧтобы получить дополнительные сведения о других действиях (и их расширениях), обратитесь к главе 13. Если вы хотите сравнить обработку действий JavaScript в программе GoLive и других программах, загрузите пустой файл GoLive JavaScript Actions: http://www.adobe. com/products/golive/pdfs/ gl_whtpr_js.pdf..
ГЛАВА 9
09_GoLive_T&T_(241-274)_rus.indd 256
Если вы удалите действия со страниц сайта, вам не понадобится удалять файл CSSscriptLib.js. По умолчанию программа GoLive автоматически выполняет удаление в момент загрузки файла. Если вы хотите увидеть размер файла, вы можете удалить его вручную. Выберите пункты меню Site Flatten JavaScript Library (Очистить библиотеку JavaScript) или воспользуйтесь контекстным меню, чтобы получить доступ к команде Flatten JavaScript Library. Совет Имя файла «CSScriptLib.js» никак не связано с CSS. «CS» обозначает «CyberStudio», оригинальное название, которое носила программа до того, как компания Adobe купила ее у компании GoLive Systems.
Добавление интерактивности
27.01.2006 3:18:08
257 СОВЕТ
188
Выделение действий
Если вы хотите найти действия на странице, воспользуйтесь функцией выделения действий в программе GoLive. Выделение позволяет понять, какими действиями вы пользуетесь на данной странице, а также где они находятся. Для добавления выделения выберите одну из двух методик: • откройте палитру View в разделе Highlight (Выделение), нажмите кнопку Special и выберите пункт меню JavaScript Actions (рис. 188.1). Нажмите кнопку Clear, чтобы отключить выделение;
Удаление действий Вы можете находить и удалять действия вручную, но на сложной странице это займет много времени. Вместо этого выберите в плавающем меню палитры Actions команду Delete All Actions (Удалить все действия)
Рис. 188.1. С помощью функции Highlight вы можете выделить действия на странице
• откройте палитру Actions и выберите в плавающем меню команду Highlight Rollovers & Actions (Выделить эффекты Rollover и действия), как показано на рис. 188.2. Чтобы отключить функцию выделения, повторно выберите эту команду.
Рис. 188.2. Также вы можете активировать выделение из плавающего меню палитры Actions
СОВЕТ 188: Выделение действий
09_GoLive_T&T_(241-274)_rus.indd 257
27.01.2006 3:18:08
258 СОВЕТ
189 Запомните действия, с которыми вы недавно работали Вы заметили, что некоторыми действиями вам приходится пользоваться намного чаще, чем другими? Программа GoLive добавляет шесть недавно использовавшихся действий в ниспадающее меню Action на палитре Actions. Это упрощает доступ к данным действиям.
Копирование и вставка действий
Действия в программе GoLive представляют собой мощные функции JavaScript, которые позволяют без особого труда создавать на веб-страницах интересные и полезные интерактивные эффекты. Используя программу GoLive, вы можете скопировать и вставить действия из одной ссылки в другую или из одного события в другое. Например, если вы случайно создадите действие для неправильного события, вырежьте его и вставьте в нужное событие. Если вы создали последовательность из сложных действий, вы сможете скопировать ее и переместить из одной ссылки в другую! Чтобы скопировать или вырезать действие, выберите его в списке Actions (справа на палитре Actions) и выполните команду Edit Copy or Edit Cut. Чтобы вставить действие со всеми настройками в новую ссылку, выделите ее, а затем выберите действие в списке справа на палитре Actions. Теперь поместите курсор в список Actions и выполните команду Edit Paste (рис. 189.1).
Рис. 189.1. Вы можете копировать и вставлять действия, как и любой текст
ГЛАВА 9
09_GoLive_T&T_(241-274)_rus.indd 258
Добавление интерактивности
27.01.2006 3:18:08
259 СОВЕТ
190
Очищаем меню Actions
Как говорилось в примечании к Совету 189, программа GoLive запоминает последние шесть действий, которые вы использовали, и добавляет их в ниспадающее меню на палитре Action. Эта функция была добавлена в GoLive CS, чтобы упростить доступ к часто применяемым действиям; вам больше не нужно пролистывать длинные списки действий (рис. 190.1). Данное нововведение в GoLive CS было весьма полезно, однако некоторых пользователей список действий раздражал. К примеру, иногда список становился очень длинным и даже включал повторяющиеся действия. Еще одна проблема состояла в том, что вы не могли очистить список, не удалив при этом все параметры программы. Рады сообщить, что команда разработчиков GoLive доработала эту функцию в программе GoLive CS2. Если вы хотите очистить спиРис. 190.1. Программа сок Actions, выберите в плавающем GoLive запоминает последние меню соответствующей палитры шесть действий, которые вы команду Reset Action Menu (Очисиспользовали, и добавляет их в ниспадающее меню на палитре тить список действий), как покаAction зано на рис. 190.2.
Потеряли опции меню? GoLive CS палитры Rollovers и Actions были скомбинированы на одной палитре, Rollovers and Actions. Опции меню палитр также были скомбинированы. Если вы не можете найти какую-либо опцию в меню палитры Actions, может быть, вы найдете ее в меню палитры Rollovers.
Рис. 190.2. Очистите список Action из плавающего меню
СОВЕТ 190: Очищаем меню Actions
09_GoLive_T&T_(241-274)_rus.indd 259
27.01.2006 3:18:08
260 СОВЕТ
191
Создание форм
Формы очень удобны, потому что они позволяют получить информацию и обратную связь (а может быть, даже заказы) от посетителей вашего веб-сайта. Чтобы создать форму, переместите контейнер формы из раздела Forms палитры Objects в редактор Layout Editor. Чтобы объекты формы правильно функционировали, вы должны поместить их в контейнер формы. Добавление таблицы в контейнер формы дает возможность организовать и выровнять все поля формы и их ярлыки. Существует несколько различных элементов формы, которые можно использовать в программе GoLive. Далее мы приведем описание объектов, с которыми вы будете работать чаще всего: • текстовое поле . В этом поле вы вводите краткую информацию, например, название, адрес электронной почты и почтовый адрес; . Пароли функционируют так же, как тексто• пароли вые поля, за исключением того, что введенный автором текст визуализируется в виде маркеров или звездочек. Пароли предназначены для защиты от посторонних глаз такой важной информации, как номера кредитных карт и так далее; . Это специальное текстовое поле, • текстовая область которое может содержать несколько строк для ввода информации. Очень удобно для ввода примечания или вопроса; • поле флажка . Используйте поля флажка, если на вопрос можно дать несколько ответов. Например, если в форме задается вопрос о вашем любимом вкусе мороженого, вы можете выбрать ваниль, клубнику и шоколад; • переключатель . Используйте переключатель, если на ваш вопрос можно ответить «или/или»; • ниспадающее окно . Позволяют посетителю сайта сделать выбор в списке опций. К примеру, из какого вы штата? • ярлык . После создания всех элементов формы вы можете добавить к каждому элементу объект Label; • кнопка Submit (Отправить) . Каждой форме требуется кнопка Submit, которая позволяет пользователю отправить свой ответ;
ГЛАВА 9
09_GoLive_T&T_(241-274)_rus.indd 260
Добавление интерактивности
27.01.2006 3:18:09
261
• кнопка Reset (Очистить) . Кнопку Reset использовать необязательно, но она позволит вашим посетителям удалить ошибочно введенные данные и начать заново; • скрытые поля . Пользователь не увидит скрытые поля формы (отсюда и название), но значения в таких полях сохраняются в кодировке страницы и отправляются вместе с прочими данными формы. Вы можете использовать их или нет; это зависит от того, как ваш провайдер обрабатывает передачу данных формы. После завершения создания формы повторно выберите контейнер формы в редакторе Layout Editor и введите его название в поле Name/ID палитры Inspector (рис. 191.1). Также вы должны настроить действие формы на палитре Inspector в соответствии с инструкциями, которые вы получаете от вашего провайдера или системного администратора. Измените значение опции Method на Post.
Свяжитесь с вашим провайдером Мы хотели бы, чтобы существовала одна простая кнопка, которая отправляла бы ваши формы в базу данных или на адрес электронной почты. К сожалению, существует столько разных способов отправки форм (PHP, ASP, JSP, Lasso, Perl, AppleScript и прочие), что в каждом конкретном случае выбор будет зависеть от вашего провайдера. За подробной информацией обращайтесь к вашему провайдеру или системному администратору.
Рис. 191.1. На палитре Inspector вы можете настроить название, действие и методику формы
СОВЕТ 191: Создание форм
09_GoLive_T&T_(241-274)_rus.indd 261
27.01.2006 3:18:09
262 СОВЕТ
192 Действие Field Validator При работе с простыми формами вы можете использовать действие Field Validator; это гарантирует то, что форма будет отправлена в соответствии с вашими настройками. Чтобы применить данное действие, выберите небольшую иконку формы на контейнере формы и найдите пункт Form Submit (Отправка формы) в списке на палитре Actions. Выберите данный пункт меню и добавьте действие. Далее выберите в списке Getters пункт FieldValidator и настройте параметры поля, которое вы хотите подтвердить. Для проверки процесса отправки всех полей формы можно добавить столько действий FieldValidator, сколько считаете нужным.
Создание списка форм
В зависимости от того, как ваш провайдер настроил интерфейс «форма–электронная почта», вам может понадобиться конфигурационный файл, содержащий все поля формы. Вместо того чтобы вводить данные вручную, выделите форму и нажмите кнопку Inventory на панели Form Inspector (Инспектор форм). Откроется диалоговое окно Form Inventory (рис. 192.1). Нажмите кнопку Export (Экспорт), чтобы экспортировать названия элементов формы в текстовый файл. Затем нажмите кнопку OK.
Рис. 192.1. С помощью диалогового окна Form Inventory можно экспортировать все названия полей формы
Существует также несколько связанных с формами действий и расширений, о которых следует знать: • Form Element Extractor. Вы можете бесплатно загрузить другой список форм по адресу: www.kpmartin.com/ Downloads/; • Smart Forms. С помощью этого бесплатного расширения вы можете сэкономить массу времени на создании повторяющихся элементов формы (см. Совет 193); • VerifyForm. Используя это мощное действие, вы можете проверить и переформатировать данные формы перед тем, как посетители сайта нажмут кнопку Submit (см. Совет 249).
ГЛАВА 9
09_GoLive_T&T_(241-274)_rus.indd 262
Добавление интерактивности
27.01.2006 3:18:09
263 СОВЕТ
193
Автоматизация создания сложных форм
Создание сложной формы с большим количеством элементов или длинными ниспадающими меню может отнимать много времени и сил. Чтобы ускорить данный процесс, разработчики добавили в программу GoLive несколько встроенных элементов формы, которые располагаются на палитре Library. Откройте палитру Library из меню Window и найдите раздел Forms в списке образцов (рис. 193.1). Здесь находятся образцы многих стандартных списков форм, например, стран мира, типов кредитных карт, а также месяцев года. Вы можете переместить данные образцы в редактор Layout Editor.
Рис. 193.1. Палитра Library включает несколько встроенных элементов формы
Если вам необходимы дополнительные встроенные объекты форм, обратитесь к расширению Smart Forms, которое добавляет значительное количество стандартных элементов форм на палитру Objects (рис. 193.2). Специалисты всегда положительно отзывались об этом расширении; нам даже приходилось слышать о том, как веб-дизайнеры создавали новые формы даже до того, как их менеджеры успевали заполнить запросы! Вы тоже сможете сэкономить свое время.
СОВЕТ 193: Автоматизация создания сложных форм
09_GoLive_T&T_(241-274)_rus.indd 263
27.01.2006 3:18:09
264 Международная версия расширения Smart Forms Существует международная версия расширения Smart Form, включающая встроенные элементы форм, которые могут быть полезны жителям других стран.
Рис. 193.2. Расширение Smart Forms позволит сэкономить время и избежать опечаток
Сначала создайте форму на вашей веб-странице. Если теперь вам понадобится стандартный элемент формы (например, штат в Соединенных Штатах Америки, день недели или скорость соединения), вы сможете переместить его из нового раздела Smart Forms палитры Objects. Существует 35 встроенных элементов формы, включая: • Form Starter (Начало формы); • Ecommerce Form Starter (Начало деловой формы);
• Credit Card Types (Типы кредитных карт);
• Countries (Страны);
• Credit Card Expiration (Дата истечения срока действия кредитной карты);
• U.S. Postal (Почтовые адреса в США); • States and Provinces (Штаты и провинции); • Canadian Provinces and Territories (Канадские провинции и территории);
• 9-digit U.S. Zip Code (Адресный код США, состоящий из 9 цифр);
• Education Level (Образование);
• 10-digit U.S. Phone Number (Номер
ГЛАВА 9
телефона в США, состоящий из 10 цифр);
• Household Income (Доход на члена семьи).
Добавление интерактивности
27.01.2006 3:18:09
265 СОВЕТ
194
Добавление на страницу объектов QuickTime и SWF
Вы можете добиться отличных результатов с помощью HTML, CSS и изображений. Однако такие объекты, как фильмы QuickTime и анимации SWF, способны существенно улучшить дизайн вашего сайта. При работе в программе GoLive вы можете добавлять на страницу объекты мультимедиа, используя только щелчок мышью. Выберите формат .mov или .swf на вкладке Files в окне Site и переместите объект в редактор Layout Editor. Программа GoLive автоматически добавит атрибуты высоты и ширины, информацию о подключении, а также тэги и <embed>, позволяющие странице правильно функционировать в браузере. Отметим, что палитра Inspector изменяется в зависимости от того, какой тип файла вы добавили. Например, если вы поместили на страницу фильм QuickTime, вкладка QuickTime на палитре Inspector предоставит доступ к таким функциям, как контроллер, автоматическое воспроизведеРис. 194.1. Измените атрибуты ние и повтор видео (рис. 194.1). объектов QuickTime на вкладке Когда вы добавляете на страQuickTime палитры Inspector ницу Flash-анимацию, на палитре Inspector появляется вкладка SWF, которая позволяет настроить для анимации автоматическое воспроизведение, повтор, качество воспроизведения, а также масштабирование при изменении размеров окна (рис. 194.2). Обратитесь к Совету 241 за информацией о том, как использовать вкладку Detect (Найти) на палитре SWF Inspector, чтобы добавить функцию распознавания кодировки.
Создание интерактивных фильмов QuickTime Poster Frame Многие веб-дизайнеры предпочитают работать с мультимедиаобъектами в формате QuickTime. Высокое качество данного формата позволяет удовлетворить вкусы самых взыскательных посетителей. На вебсайте www.golivein24.com/ tips/qtposter/ вы найдете описание методики, которая дает пользователю возможность управлять воспроизведением фильма QuickTime.
Рис. 194.2. На палитре Inspector вы можете управлять атрибутами объектов SWF
СОВЕТ 194: Добавление на страницу объектов QuickTime и SWF
09_GoLive_T&T_(241-274)_rus.indd 265
27.01.2006 3:18:09
266 СОВЕТ
195 Проверьте Обязательно протестируйте вашу страницу в настоящем веб-браузере, так как мы получали противоречивые результаты при проверке страницы в окне Preview программы GoLive.
Добавление на страницу объектов Real
На ваши веб-страницы вы можете добавить объекты в таких популярных форматах, как RealAudio и RealVideo. Программа GoLive содержит объект Real, который можно использовать и для аудио, и для видео. Чтобы использовать объект Real, переместите его из группы Basic палитры Objects на вашу страницу. Палитра Inspector предложит несколько опций; самая важная из них – это ссылка на исходный файл. Далее понадобится выбрать параметры автоматического воспроизведения клипа, а также типы настроек для пользователей. Чтобы изменить данные настройки, щелкните по вкладке Real. При работе с видео откройте окно Controls на вкладке Image. Если вы выберете другие опции, звук будет воспроизводиться, но изображение не появится на экране. При работе с аудио вы можете выбрать опцию Control Panel (Панель управления), которая дает пользователю возможность сделать паузу, остановить и возобновить воспроизведение клипа, оставить доступной только кнопку Play и так далее. Разумеется, опытные пользователи смогут щелкнуть правой кнопкой (выполнить Ctrl+щелчок в среде Mac) и сделать выбор в контекстном меню браузера (рис. 195.1).
Рис. 195.1. Если вы хотите воспроизвести видео, выберите опцию Image Window
ГЛАВА 9
09_GoLive_T&T_(241-274)_rus.indd 266
Добавление интерактивности
27.01.2006 3:18:09
267 СОВЕТ
196
Добавление на страницу объектов Windows Media
Чтобы использовать на ваших страницах файлы Windows Media, сначала необходимо поместить на них объекты Windows Media. После выбора объекта вы увидите в верхней части окна четыре вкладки: Basic (Базовые), More (Далее), Attribs (Атрибуты) и Windows Media. Свяжите объект Windows MediaObject с исходным файлом на вкладке Basic палитры Inspector. Если вы щелкните по вкладке Windows Media, откроется группа из четырех дополнительных вкладок, на которых вы можете настроить атрибуты для объекта Windows Media. Например, вы можете выбрать опцию Autoplay, которая начинает воспроизведение клипа сразу после его загрузки в браузере, а также опцию Enable Controls (Активировать средства управления), позволяющую пользователю сделать паузу, остановить и возобновить воспроизведение клипа (рис. 196.1). Рис. 196.1. Вкладка Важно отметить, что объект Windows Media на палитре Windows Media Object просто запиInspector содержит четыре сывает тэги в исходную дополнительные вкладки, кодировку, но не добавляет тэги на которых можно настроить <embed>. Это не является проблемой дополнительные атрибуты для браузеров Windows, однако для воспроизведения клипа в браузерах Macintosh понадобится добавить тэги <embed>. Для этого выполните следующие действия: 1. Выделите объект Windows Media на странице. 2. Нажмите кнопку Split Source, чтобы открыть исходную кодировку. Кодировка для выбранного объекта будет начинаться с тэга и заканчиваться тэгом . 3. Введите следующий текст в исходную кодировку между тэгами : <embed type=”application/x-mplayer2” src=”filename.ext” width=”xxx” height=”xxx”>. Замените текст filename.ext названием файла исходного клипа и введите вместо текста xxx размеры клипа в пикселях. Если вы не знаете путь и/или название файла, найдите кодировку <param name=”url” value=”your/filename/here. wmv”> и скопируйте путь, записанный вместо значения. Наконец, помните о том, что, если у посетителя страницы на компьютере не установлена программа Windows Media Player, клип может воспроизводиться неправильно.
СОВЕТ 196: Добавление на страницу объектов Windows Media
09_GoLive_T&T_(241-274)_rus.indd 267
27.01.2006 3:18:09
268 СОВЕТ
197 Мне эта музыка не нравится Разумеется, вы можете настроить музыкальный файл на автоматическое воспроизведение после загрузки страницы. Однако мы рекомендуем добавить опцию, которая позволит посетителю отключить звук, если он ему не нравится. Посетитель должен иметь возможность остановить воспроизведение музыки, а также изменить громкость ее звучания.
Добавление на страницу аудио в формате MP3
Чтобы встроить в страницу аудио в формате MP3, вы можете использовать объект Real, объект QuickTime или объект Windows Media. В некоторых случаях, если вы не уверены в том, с каким приложением будет работать посетитель сайта, вы можете применить несколько опций. Если вы решите поступить именно так, следует настроить опцию Autoplay на False (Нет) для каждой команды, чтобы не начинать воспроизведение всех объектов после загрузки страницы в браузере. Для этого отключите опции Autostart на панели Inspector для всех приложений (рис. 197.1).
Рис. 197.1. Если вы добавили на страницу несколько клипов, щелкните по полю флажка, чтобы отключить функцию Autostart. Слева на рисунке вы видите настройки для объекта QuickTime, а справа – настройки для объекта Real
Также вы можете создать текстовую ссылку на аудиофайл. При щелчке мыши клип откроется в отдельном окне и будет воспроизводиться с применением установленной на компьютере пользователя программы, которая поддерживает формат MP3. Преимущество данного способа состоит в том, что вам не нужно гадать, пытаясь определить, с каким приложением работает посетитель сайта. Недостаток заключается в том, что каждый клип открывается в отдельном окне, поэтому для возвращения к странице посетителю придется нажать кнопку Back в браузере.
ГЛАВА 9
09_GoLive_T&T_(241-274)_rus.indd 268
Добавление интерактивности
27.01.2006 3:18:10
269 СОВЕТ
198
Создание слайд-шоу QuickTime
Программа GoLive включает мощный видео редактор QuickTime Web; одна из самых полезных функций данного редактора – это возможность создания слайд-шоу QuickTime. Следуйте указаниям, приведенным далее. 1. Выполните команду File New Web Multimedia QuickTime Movie и введите размеры фильма QuickTime, который вы хотите создать. Нажмите кнопку OK (рис. 198.1).
Рис. 198.1. Создайте новый фильм и выберите его размеры
2. Выполните команду Movie Show Timeline Editor (Фильм Открыть редактор Timeline Editor), чтобы открыть окно Timeline. 3. Переместите трек Picture из раздела QuickTime палитры Objects в левую часть окна Timeline. Измените размеры трека Picture на палитре Inspector таким образом, чтобы они соответствовали размерам фильма (рис. 198.2).
Рис. 198.2. Настройте размеры трека Picture таким образом, чтобы они соответствовали размерам фильма
СОВЕТ 198: Создание слайд-шоу QuickTimes
09_GoLive_T&T_(241-274)_rus.indd 269
27.01.2006 3:18:10
270 4. Выделив трек Picture, посмотрите на вкладку Slideshow (Слайд-шоу) на палитре Inspector. Используйте доступные опции для настройки длительности отображения каждого рисунка, а также для добавления переходов между изображениями (рис. 198.3).
Рис. 198.3. Измените задержку, повтор и эффекты перехода для слайдшоу на палитре Inspector
5. Переключитесь на вкладку Images палитры Inspector и подготовьтесь к импорту изображений. Перед тем как нажать кнопку Import, вы должны проверить некоторые настройки. Программа GoLive уменьшит масштаб изображений, которые больше, чем размеры окна фильма, поэтому выберите опцию Images Constrain Proportion (Изображения сохраняют пропорции). Если какое-либо изображение имеет пропорции или ориентацию, которая отличается от параметров фильма, это приведет к появлению эффекта матового фона. Чтобы управлять данным эффектом, воспользуйтесь опцией Background Color (Цвет фона), как показано на рис. 198.4.
Рис. 198.4. Перед импортом файлов измените настройки изображений
ГЛАВА 9
09_GoLive_T&T_(241-274)_rus.indd 270
Добавление интерактивности
27.01.2006 3:18:10
271 6. Нажмите кнопку Import и выберите изображения для добавления в слайд-шоу. Чтобы выделить несколько изображений, удерживайте нажатой клавишу Shift. Так как программа GoLive применяет технологию QuickTime, вы можете добавлять изображения в различных форматах (документы Photoshop с несколькими слоями, GIF, JPEG, PNG, Pict, BMP, Targa, TIFF и так далее), с разными настройками разрешения и размеров. Вы даже можете комбинировать изображения из нескольких источников. После этого нажмите кнопку Choose (Выбрать). 7. В следующем диалоговом окне вы сможете сжать изображения для фильма (рис. 198.5). Так как слайд-шоу состоит из неподвижных изображений, мы предлагаем использовать функцию сжатия Photo JPEG с необходимыми вам настройками качества. Нажмите кнопку OK, и программа GoLive импортирует, сожмет и настроит последовательность изображений с использованием переходов.
Рис. 198.5. Выберите функцию Photo JPEG, чтобы сжать изображения в слайд-шоу
СОВЕТ 198: Создание слайд-шоу QuickTimes
09_GoLive_T&T_(241-274)_rus.indd 271
27.01.2006 3:18:10
272 Пусть программа GoLive выполнит часть работы за вас Не стоит изменять размеры исходных изображений перед их импортированием в слайд-шоу , потому что программа GoLive автоматически внесет нужные изменения в соответствии с настройками трека Picture.
8. После создания слайд-шоу в окне Timeline появятся неподвижные изображения с переходами между ними (рис. 198.6). Для дополнительной настройки фильма дважды щелкните по любой из иконок перехода A/B в окне Timeline; вы сможете выбрать другой переход.
Рис. 198.6. Программа GoLive автоматически настраивает последовательность изображений, а также добавляет переходы
9. Когда вы будете готовы к сохранению фильма, не применяйте команды экспорта, так как это приведет к визуализации каждого отдельного кадра; в результате размеры файла окажутся весьма значительными. Вместо этого выполните команду File Save As и сохраните фильм с оригинальными переходами QuickTime. Теперь вы сможете воспроизвести фильм в программе QuickTime Player или поместить его на веб-страницу (см. Совет 194), как показано на рис. 198.7.
Рис. 198.7. Любой посетитель сайта сможет просмотреть ваше слайд-шоу в бесплатной программе QuickTime Player, доступной по адресу: www.apple.com/quicktime
ГЛАВА 9
09_GoLive_T&T_(241-274)_rus.indd 272
Добавление интерактивности
27.01.2006 3:18:10
273 СОВЕТ
199
Создание карт изображений
Карты изображений (imagemaps) представляют собой еще один способ создания панелей навигации на странице. Вместо того чтобы разделять страницу в программе Photoshop или создавать ниспадающее меню DHTML, вы можете применить карты изображений. Выполните следующие действия: 1. Поместите изображение в редактор Layout Editor и отметьте поле флажка Use Map (Использовать карту) на вкладке More палитры Inspector. Программа GoLive автоматически добавит уникальное название карты в поле Name; при желании вы можете его изменить (рис. 199.1). Обратите внимание на небольшой желтый квадрат с буквой M в редакторе Layout Editor. Это индикатор, который указывает на наличие карты изображения на странице.
Рис. 199.1. Чтобы преобразовать изображение в карту, выберите опцию Use Map на палитре Inspector
2. Теперь посмотрите на панель инструментов. Вы увидите, что на ней появились инструменты, которые необходимы вам для рисования точки щелчка (hotspots) с гиперссылками (рис. 199.2). Чтобы создать точку прямоугольной или круглой формы, выберите инструменты на панели и щелкните по карте изображения в редакторе Layout Editor. Чтобы создать точку в форме полигона, выберите инструмент и несколько раз щелкните в углах формы.
Рис. 199.2. Для рисования карты изображения воспользуйтесь инструментами на панели
СОВЕТ 199: Создание карт изображений
09_GoLive_T&T_(241-274)_rus.indd 273
27.01.2006 3:18:10
274 Масштабирование Вы можете изменять масштаб карты изображения, сохраняя при этом масштаб страницы прежним. Если вы хотите точно настроить параметры карты изображения, удерживая нажатой клавишу Shift, пропорционально измените размеры изображения от нижнего правого угла. Изображение станет больше, а точки щелчка растянутся соответствующим образом. Далее настройте параметры точек. Щелкните по иконке Set to Original Size (Использовать оригинальные размеры) на вкладке Basic палитры Clickable Image Map, и размеры точек щелчка будут пропорционально изменены.
3. После создания всех точек выберите их и привяжите гиперссылки в поле URL палитры Inspector (рис. 199.3).
Рис. 199.3. Вы можете привязать гиперссылки к точкам щелчка так же, как и обычные ссылки
Теперь мы дадим несколько полезных советов: • чтобы создать группу точек одинакового размера (как при создании строки навигации), сформируйте одну точку, а затем скопируйте ее. В результате будет создано несколько точек одинакового размера; • если вам трудно поместить карту изображения в нужной точке, выделите точку щелчка и определите нужные значения на палитре Transform (Трансформировать); • выравнивание точек щелчка может оказаться непростой задачей. Чтобы выбрать несколько точек, удерживайте клавишу Shift нажатой. Для выравнивания точек воспользуйтесь палитрой Align.
ГЛАВА 9
09_GoLive_T&T_(241-274)_rus.indd 274
Добавление интерактивности
27.01.2006 3:18:10
275
ГЛАВА 10
Сложное управление сайтом Одна из наших самых любимых историй произошла в то время, когда Адам завершал создание огромного сайта в 7500 страниц в программе GoLive. За два часа до публикации сайта позвонил клиент и попросил «внести последние, небольшие изменения». Адам знал, что последние изменения не бывают небольшими, но ему пришлось внимательно выслушать клиента. В другом веб-редакторе данная задача стала бы настоящим кошмаром; в программе GoLive все оказалось просто. Загрузка обновленных файлов заняла больше времени, чем сам процесс редактирования. Проект был сдан вовремя; по сравнению с заложенным бюджетом разработчикам удалось сэкономить 15 процентов. Адаму не удалось бы решить поставленную задачу ни в какой программе, только в GoLive. В программе GoLive вы можете создавать очень интересные проекты, однако для того чтобы сдать проект в срок (или даже раньше срока), понадобится использовать функции управления. Нам очень нравится тот факт, что сейчас GoLive может обрабатывать большие сайты быстрее, чем раньше. Очень удобно использовать длинный список команд Undo при решении задач управления сайтом. И мы очень ценим то, что программа GoLive отслеживает гиперссылки в форматах HTML, XHTML, CSS, JavaScript, PDF, QuickTime и SWF. Такие функции позволяют работать быстро и креативно, причем вам совершенно не приходится беспокоиться о разорванных ссылках или отсутствующих изображениях. Даже действия и расширения из других программ (см. советы в главе 13) работают без проблем с функциями отслеживания ссылок в окне Site.
276 СОВЕТ
200
Создание диаграмм для новых сайтов
Скорее всего, вы уже привыкли рисовать карты сайта (на бумаге или компьютере), а затем создавать файловую структуру в формате HTML. Наконец-то настал конец вашим мучениям. Теперь вы можете использовать мощные функции создания диаграмм программы GoLive. Программа GoLive предлагает три различных режима создания карт сайта; далее мы расскажем обо всех доступных опциях.
Режим просмотра Navigation Выполните команду View Site Tabs Navigation, чтобы открыть режим просмотра Navigation для сайта. Режим Navigation создает визуальную карту существующего сайта, основанную на комбинации структуры папок и гиперссылок между страницами (рис. 200.1). Чтобы изменить ориентацию и дизайн карты, воспользуйтесь опциями на палитре View. Применяя опции Navigation, Display и Filter, вы можете настроить карту сайта любым удобным способом. Чтобы добавить на сайт страницы в данном режиме просмотра, переместите их из палитры Objects или Library.
Рис. 200.1. Используйте режим просмотра Navigation, чтобы отобразить иерархическую карту для текущего сайта
ГЛАВА 10
Сложное управление сайтом
277
Режим просмотра Links Режим просмотра Links сгруппирован с режимом просмотра Navigation и открывается с помощью команды View Site Tabs Links. Режим Links очень удобен для изучения существующих сайтов или ссылок между различными файлами (рис. 200.2). Чтобы изменить дизайн и настройки параметров в режиме Links, внесите модификации на палитре View. Если вы замечаете, что режим просмотра Links осложняет навигацию сайта, активируйте панель Panorama. Включите панель Reference (Ссылка), чтобы видеть, на какой файл ссылается выбранная страница.
Рис. 200.2. Режим Links функционирует аналогично палитре In & Out Links
СОВЕТ 200: Создание диаграмм для новых сайтов
Создание карт сайта с гиперссылками Чтобы создать карту сайта с гиперссылками, откройте режим просмотра Navigation и выполните команду Diagram Create Table of Contents (Диаграмма Создать таблицу содержания). В карту сайта будут включены все страницы, которые отображены в режиме просмотра Navigation (щелкайте по иконкам с символом +).
278
Диаграммы Первые два режима просмотра используются для работы с существующими сайтами. Режим Diagrams применяется для создания карт новых сайтов или новых разделов сайтов. 1. Чтобы создать новую диаграмму, выполните команду Diagram New Diagram (Диаграмма Новая диаграмма) и введите название диаграммы (рис. 200.3). Новая диаграмма будет добавлена на вкладку Extras в окне Site; чтобы открыть диаграмму, выберите ее название в подменю Diagram Diagrams. Рис. 200.3. Создайте новую диаграмму, введите ее название и откройте ее из меню Diagram
Совет В файлах диаграмм применяется расширение .aglsd, которое является сокращением от Adobe GoLive Site Diagram.
2. Вы должны добавить в диаграмму якорную страницу, которая сообщит программе GoLive о том, как следует встроить новую диаграмму в сайт. Чтобы добавить якорную страницу, переместите любую страницу из вкладки Files окна Site в окно диаграммы (рис. 200.4). Обратите внимание: рядом с якорной страницей в окне диаграммы имеется иконка с изображением якоря.
Рис. 200.4. Чтобы создать якорную страницу, переместите страницу из окна Site
ГЛАВА 10
Сложное управление сайтом
279 3. Создайте карту сайта: переместите объекты из раздела Diagram палитры Objects в окно диаграммы. Вы можете добавлять в диаграмму такие базовые объекты, как страницы, разделы и группы, а также сложные объекты, например, ссылки на другие объекты, скрипты сервера и объекты мультимедиа (рис. 200.5).
Рис. 200.5. Для построения карты сайта воспользуйтесь объектами из раздела Diagram палитры Objects
4. Для создания ссылок между несколькими файлами примените инструмент Point and Shoot (Fetch URL) рядом с файлами в окне диаграммы. 5. После завершения создания структуры сайта вы можете привязать к страницам шаблоны (см. Совет 133), чтобы ускорить процесс работы над дизайном сайта. Выделите страницу на диаграмме, откройте вкладку Page палитры Inspector и выберите шаблон в ниспадающем меню Template (рис. 200.6).
Рис. 200.6. Перед отправкой страниц на сайт привяжите к ним шаблон на диаграмме
СОВЕТ 200: Создание диаграмм для новых сайтов
280 6. Перед тем как завершить работу с картой сайта, вы можете настроить внешний вид диаграммы с помощью опций на палитре View (рис. 200.7). Количество доступных настроек впечатляет. Также вы можете изменить диаграмму путем добавления логотипа компании или названия проекта на вкладке Master в окне диаграммы.
Рис. 200.7. Измените настройки Design и Display диаграммы на палитре View
7. Когда вы будете готовы к добавлению объектов на страницы диаграммы, выполните команду Diagram Staging Submit All (Диаграмма Стадии Отправить все). Программа GoLive переместит все страницы из диаграммы на вкладку Files в окне Site. Это позволит сэкономить очень много времени; кроме того, все ссылки на страницах и в шаблонах будут автоматически обновляться программой GoLive. По умолчанию страницы диаграммы отправляются на верхний уровень окна Site, но вы можете изменить эту настройку. Перед отправкой диаграммы выделите файлы и разделы в окне диаграммы и введите название папки в поле Folder (Папка) или Target Directory (Конечная папка) на палитре Inspector (рис. 200.8).
ГЛАВА 10
Сложное управление сайтом
281 Экспорт карт сайта в формат PDFF
Рис. 200.8. Привяжите конечные папки к страницам диаграммы на палитре Inspector
8. Если после отправки диаграммы вы передумали и решили изменить ее дизайн или добавить панель навигации, вы сможете вернуть все страницы диаграммы. Выполните команду Diagram Staging Recall All (Отозвать все).
СОВЕТ 200: Создание диаграмм для новых сайтов
Выполните команду File Export Diagram, выберите пункт PDF в ниспадающем меню Format и нажмите кнопку OK. Ваша диаграмма будет экспортирована в формат PDF, который можно просмотреть в бесплатной программе Adobe Reader. Это очень удобно, потому что вы можете получить отзывы других пользователей о вашем проекте еще до его начала.
282 СОВЕТ
201
Управление файлами на палитре In & Out Links
Палитра In & Out Links в GoLive CS2 предлагает уникальную возможность для управления ссылками и просмотра связей между файлами на вашем сайте. Откройте палитру In & Out Links в меню Window Site и выберите файл на вкладке Files в окне Site. Выбранный файл будет автоматически помещен в центр палитры (рис. 201.1). Слева располагаются все файлы, которые ссылаются на выбранный файл; если вы выберете такой файл, как домашняя страница, внешняя таблица .css или шаблон, вероятно, вы увидите большое количество ссылок. Справа на палитре вы видите все файлы, на которые ссылается выбранный файл. Если вы выбрали файл в формате JPEG, справа не должны появиться другие файлы; если вы выделили домашнюю страницу или страницу навигации, справа вы должны увидеть значительное количество файлов.
Рис. 201.1. Палитра In & Out Links позволяет быстро просмотреть все ссылки и связанные файлы для любого выбранного файла
Чтобы понять, что есть что, поместите курсор мыши на файл на палитре; в левом нижнем углу палитры отобразится путь к файлу относительно корневого уровня веб-сайта. Это может оказаться очень полезным в случае, если вы используете несколько файлов с одинаковыми названиями (например, index.html) на одном сайте. Палитра In & Out Links предназначена не только для того, чтобы упростить просмотр ссылок на файлы. С помощью данной палитры вы также можете переназначать ссылки и исправлять ошибки. Если вы хотите переназначить ссылку на другой файл, с помощью инструмента Point and Shoot (Fetch URL)
ГЛАВА 10
Сложное управление сайтом
283
выберите новый файл на вкладке Files в окне Site (рис. 201.2). Если на палитре имеется разорванная ссылка или отсутствующий файл, вы можете переназначить ссылку на нужный файл.
Ссылки Previous и Next В GoLive CS2 появилась новая функция: в левом нижнем углу палитры In & Out Links теперь доступны кнопки Previous (Предыдущая) и Next (Следующая) . Вы можете не только щелкать по различным файлам на палитре, но и быстро перемещаться вперед и назад по последовательности.
Рис. 201.2. Используйте палитру In & Out Links для того, чтобы переназначать ссылки и исправлять ошибки
Палитра In & Out Links является одной из самых мощных функций управления сайтом в программе GoLive; она содержит ряд скрытых опций, о которых большинство пользователей не знает. Если вы посмотрите на палитру In & Out Links для большого сайта, количество доступных объектов может вас шокировать. Чтобы настроить внешний вид палитры In & Out Links, выберите команду Palette Options (Опции палитры) в меню Palette в верхнем правом углу палитры (рис. 201.3).
Рис. 201.3. В окне Palette Options палитры In & Out Links вы можете настроить внешний вид палитры и параметры сортировки
Используя данные опции, вы можете скрыть все ссылки на выбранный файл и отобразить только HTML-файлы, связанные с данным файлом. Выберите параметры фильтрации в диалоговом окне Options и нажмите кнопку OK.
СОВЕТ 201: Управление файлами на палитре In & Out Links
284 СОВЕТ
202
Устранение неполадок на вкладке Errors (Ошибки)
Если вы используете функции управления сайтом в программе GoLive, маловероятно, что вы найдете ошибки на сайте; если все же вы обнаружили ошибки, вы можете легко их исправить. Если вы увидите иконки с ошибками на вкладке Files в окне Site или неполадки на вкладке Errors в окне Site , сначала обновите окно Site. Возможно, вы переместили или переименовали отдельные файлы в вашей операционной системе, а программа GoLive пока не распознала эти изменения. Если обновление не решает проблему, откройте вкладку Errors в окне Site и прочитайте описание возможных действий по устранению неполадок: • Missing Files (Отсутствующие файлы). Выберите ошибку отсутствующего файла в окне Site и воспользуйтесь инструментом Point and Shoot на палитре Error Inspector, чтобы обновить ссылки на нужный файл (рис. 202.1). Подтвердите изменения в диалоговом окне;
Рис. 202.1. Чтобы решить проблему отсутствующих файлов, воспользуйтесь инструментом Point and Shoot на палитре Error Inspector
• Orphan Files (Зависшие файлы). Зависшие файлы – это файлы, которые программа GoLive может найти на вашем жестком диске; однако данные файлы не находятся в папке веб-содержимого. Если вы не исправите ошибку зависших файлов, они не будут загружены на сервер, и посетители обнаружат соответствующую ошибку. Чтобы устранить данную неполадку, переместите ее из вкладки Errors на вкладку Files в окне Site (рис. 202.2). Программа GoLive скопирует зависший файл в корневую папку и обновит все ссылки на сайте;
ГЛАВА 10
Сложное управление сайтом
285
Рис. 202.2. Переместите ошибки зависших файлов, чтобы скопировать файлы на сайт и обновить все нужные ссылки
• Filename Constraints (Ограничения, связанные с названиями файлов). Если вы хотите использовать определенную систему названий для всех файлов и папок сайта, выполните команду Site Settings. В разделе Filename Constraints щелкните по полю Site Specific Settings (Особые настройки сайта) и выберите одну из установок (рис. 202.3).
Рис. 202.3. В диалоговом окне Site Settings вы настраиваете параметры Filename Constraints для сайта
СОВЕТ 202: Устранение неполадок на вкладке Errors (Ошибки)
286 В окне Site появится предупреждающее сообщение с информацией о том, что некоторые названия файлов и папок не отвечают выбранной опции. Названия файлов не будут изменены автоматически, и вы сможете создавать новые файлы, не отвечающие настройкам. Тем не менее, вы должны исправить ошибку. Для этого выберите файл на вкладке Errors и измените название файла на палитре File Inspector (рис. 202.4).
Рис. 202.4. Выберите опцию Filename Warning (Предупреждение, связанное с названием файла) на вкладке Errors и измените название файла на палитре Inspector
ГЛАВА 10
Сложное управление сайтом
287 СОВЕТ
203
Изменение ссылок на сайте
Иногда вам необходимо изменить ссылки на сайте с одного файла на другой. Для этого вы можете использовать последовательность команд Find и Replace; однако гораздо удобнее применить функцию Change References (Изменить ссылки). Выделите файл для переназначения на вкладке Files окна Site и выполните команду Site Change Links (Сайт Изменить ссылки). Выделенный файл будет автоматически добавлен в верхнее поле; теперь будет достаточно указать программе GoLive файл, для которого вы хотите заменить ссылки. С помощью инструмента Point and Shoot найдите новый файл в окне Site и нажмите кнопку OK (рис. 203.1).
Рис. 203.1. Привяжите ссылки и нажмите кнопку OK
Подтвердите изменения в диалоговом окне Change Links (Изменить ссылки), как показано на рис. 203.2. Нажмите кнопку OK. Программа GoLive автоматически обновит все нужные страницы.
Рис. 203.2. Подтвердите изменения ссылок для сайта
СОВЕТ 203: Изменение ссылок на сайте
Предупреждение о размерах изображения Если вы измените ссылки для изображения, следует убедиться в том, что два изображения имеют одинаковые размеры (в пикселях). Команда Change References обновляет только ссылку на изображение, а не его размеры. Если два изображения имеют различные размеры, необходимо воспользоваться командами Find и Replace (см. Совет 205), чтобы обновить размеры изображения.
288 СОВЕТ
204
Использование команд Find и Replace в документе
Представьте себе ситуацию: вам поручили обновить устаревший веб-сайт средней по размеру компании. Ни одна из страниц сайта не основана на шаблоне, а данные не хранятся в базе данных. Вы собираетесь в будущем внести все необходимые изменения, однако сейчас вы должны исправить и обновить данные на статичных страницах. Сэкономьте ваше время, используя функции Find и Replace. Команды Find находятся в меню Edit. В меню Find находится несколько подменю: Find Text (Найти текст), Find Next (Найти следующий), Find Previous (Найти предыдущий), Find Selection (Найти выбранный), Enter Find String (Ввести строку для поиска), Replace (Заменить), Replace & Find Next (Заменить и найти следующий); некоторые из данных опций будут выделены серым цветом, пока вы не выполните хотя бы одну операцию Find. Если вы будете точно знать, когда следует использовать эти команды, вы сможете выполнять редактирование без проблем. Откройте страницу для поиска, выполните команду Edit Find Find Text и выберите пункт Top Document (Верхний документ) в ниспадающем меню. Вы можете ввести, скопировать или переместить текст или команды в поле ввода вверху (рис. 204.1).
Рис. 204.1. Чтобы выполнить операцию Find на активной странице, выберите команду Top Document в меню в нижней части окна Find Text
ГЛАВА 10
Сложное управление сайтом
289
Откройте раздел Options, чтобы выбрать опции поиска: • Match Case (Различать регистр). Активируйте данную опцию, если вы хотите учитывать регистр при поиске; например, искать слово «веб», но не слово «Веб»; • Entire Word (Слово целиком). Выберите эту опцию, если вы хотите искать слово целиком; например, найти слово «hand», но не слово «handsome»; • Regular Expression (Стандартные выражения). Активируйте данную опцию, если вы хотите использовать в поиске маски. Будьте осторожны! Если вы не знаете, что делаете, вы можете нарушить порядок на веб-страницах; • From Top (Сверху). Если вы нажмете кнопку From Top, поиск начнется сверху страницы. В противном случае, поиск начнется из текущего положения курсора; • Wrap Around (С возвратом). Данная функция выполнит поиск из текущего положения курсора до конца страницы. После этого будет осуществлен возврат в курсора на место; • In Selection (В выбранной области). Чтобы выполнить поиск только в выделенной области, воспользуйтесь этой опцией. Совет Чтобы выполнить поиск текста, выполните операцию Find в редакторе Layout, Source или Outline Editor. Чтобы выполнить поиск структуры, воспользуйтесь редактором Source или Outline Editor.
Чтобы заменить найденный текст, введите текст для замены в поле Replace. После этого вы можете выполнить поиск. Нажмите кнопку Find. Если соответствие было найдено, оно будет выделено на странице. Нажмите кнопку Find Next, чтобы перейти к следующему повтору, либо нажмите кнопку Replace, чтобы заменить найденный текст на текст, который вы ввели в поле Replace. Нажмите кнопку Replace & Find, чтобы заменить найденный текст и перейти к следующему повтору. Если вы хотите заменить все повторы, нажмите кнопку Replace All (Заменить все).
СОВЕТ 204: Использование команд Find и Replace в документе
Смотрите, что я нашел! Программа GoLive имеет удобную функцию, которая позволяет выполнить поиск, не открывая при этом текстовое окно Find Text. Если вы уже выполняли поиск, вы увидите в подменю Find новые команды, например, Find Next. Используя комбинации клавиш, вы сможете найти нужные объекты на странице без помощи окна Find Text.
290 СОВЕТ
205
Использование команд Find и Replace в нескольких документах
Окно Find Text содержит ниспадающий список Work On (Работать с), который позволяет выполнять поиск одновременно в нескольких документах. Выберите в данном списке опцию, если вы хотите осуществить операцию Find и Replace на нескольких страницах сайта, в группе страниц, на вкладке Files или Extras, либо в коллекции (рис. 205.1). Опции в данной области совпадают с опциями в области Top Document (см. Совет 204). Различие состоит в том, что вы должны нажать соответствующий переключатель, чтобы выполнить поиск текста в режиме Layout Mode или Source Mode.
Рис. 205.1. Вы можете выполнить поиск на всем сайте, в группе файлов или на определенных вкладках в окне Site
Если вы решили выполнить поиск текста, вы увидите стандартные опции Replace в нижнем поле. Если необходимо выполнить поиск элементов Core Elements, выберите пункт Core Elements в меню окна Find, либо активируйте команду Edit Find Find Core Elements. При этом в окне Find отобразится несколько ниспадающих списков, которые позволяют настроить параметры поиска. В разделе Change появятся опции для работы с найденным
ГЛАВА 10
Сложное управление сайтом
291
элементом. Используйте кнопки (+) и (-), чтобы добавить или удалить критерии поиска. Если вы умеете настраивать параметры поиска самостоятельно, нажмите кнопку Advanced и введите новые настройки (рис. 205.2).
Рис. 205.2. Окно Find Code Elements (Найти элементы кодировки) позволяет выполнять сложный поиск с различными критериями
Нажмите кнопку Find All, чтобы найти все повторы. В окне Results (Результаты) количество в столбце Hits показывает, сколько раз объект повторяется в каждом документе (рис. 205.3). Также вы можете выбрать в ниспадающем списке опции Matches Only (Только совпадения), Non-matches Only (Только несовпадения) или Show All (Показать все). Дважды щелкните по файлу в списке результатов, чтобы открыть файл и выделить первое совпадение. Рис. 205.3. Список результатов показывает не только документы, содержащие найденный объект, но и количество совпадений на каждой странице
СОВЕТ 205: Использование команд Find и Replace в нескольких документах
292 СОВЕТ
206 Использование стандартных выражений Если вы хотите выполнить поиск с масками (также известными как стандартные выражения), вы сможете сделать выбор среди палитр поиска в плавающем меню Find Text. Выберите пункты меню Saved Searches Regular Expressions (Сохраненные результаты поиска Стандартные выражения).
Сохранение и загрузка результатов поиска
Если необходимо выполнить поиск с очень четкими критериями, вы можете воспользоваться функцией GoLive, которая позволяет осуществить поиск на основе результатов другого поиска. Допустим, что вы хотите найти группу файлов, которые содержат слово «heartache», а также слово «backache». Сначала вы можете найти слово «heartache», а затем воспользоваться результатами поиска, чтобы найти слово «backache». Чтобы сохранить результаты поиска, выполните операцию Find и выберите в меню окна Find команду Save Search (Сохранить поиск). Программа GoLive откроет диалоговое окно Save и укажет на папку TextSearch, которая находится на несколько уровней ниже папки с настройками GoLive. Введите название для поиска и сохраните его в папке TextSearch. Чтобы использовать сохраненные результаты поиска, выберите в меню Find команду Load Search (Загрузить поиск). Программа GoLive откроет папку TextSearch и позволит выбрать нужный файл. Чтобы использовать результаты поиска для другого поиска, нажмите кнопку Use Results (Использовать результаты) в списке Results. Результаты будут автоматически загружены в поле Search In (Искать в) окна Find Text. При желании вы можете удалить объекты из списка перед тем, как использовать результаты. Чтобы сохранить результаты в виде коллекции, нажмите кнопку Save Collection (Сохранить коллекцию). См. Совет 210. Откроется диалоговое окно Create a New Collection (Создать новую коллекцию), в котором отобразится описательное название для коллекции. При желании вы можете изменить название (рис. 206.1). Как и при работе с опцией Use Results, вы можете удалить файлы из списка результатов перед тем, как сохранять его в виде коллекции. Рис. 206.1. Вы можете сохранить результаты поиска в виде коллекции. За дополнительной информацией обратитесь к Совету 210
Совет Помните о том, что коллекцию можно сохранить только на одном сайте. Если вы выполнили поиск на нескольких сайтах, вы сможете создать коллекцию и сохранить ее лишь на одном из них.
ГЛАВА 10
Сложное управление сайтом
293 СОВЕТ
207
Поиск ресурсов сайта
Предположим, что вы знаете, что файл действительно находится на данном сайте, но вы не можете его найти. Вместо того чтобы открывать все папки сайта, выполните команду Edit Find Find Site Assets (Найти ресурсы сайта). Введите критерии поиска в диалоговом окне Find Site Assets и выберите раздел сайта для поиска (рис. 207.1). Обычно вы ищете ресурсы на вкладке Files, однако вы можете выполнить поиск и на вкладках Collections, Colors, Errors, External, Extras и Font Sets в окне Site.
Рис. 207.1. Чтобы быстро найти ресурсы сайта, введите критерии поиска и нажмите кнопку Find All
Получив результаты поиска, вы сможете выбрать любой файл в списке соответствий и нажать кнопку Reveal in Site (Показать на сайте). Теперь файл будет выбран в окне Site, и вы сможете открыть палитру In & Out Links (см. Совет 201), чтобы просмотреть список файлов, которые на него ссылаются. Совет Обратитесь к Совету 28 за информацией о том, как использовать функцию Quicksearch, чтобы искать файлы из окна Site.
СОВЕТ 207: Поиск ресурсов сайта
Опция Instant Find Чтобы мгновенно применить фильтр к результатам поиска, активируйте опцию Instant Find (Мгновенный поиск). Вам даже не придется нажимать кнопку Find All.
294 СОВЕТ
208 Скрываем идентичные строки Если различия между двумя файлами минимальны, советуем активировать опцию Hide Identical Lines (Скрыть идентичные строки). Теперь вы будете видеть лишь различия между файлами, а не повторяющиеся строки кодировки.
Поиск различий между файлами
Независимо от того, исправляете ли вы неполадку в кодировке, экспериментируете ли с различными решениями проблемы, связанной с CSS или просто пробуете изменить текст, функция сравнения исходной кодировки для двух файлов будет весьма полезна. Программа GoLive включает функцию сравнения, которая активируется из меню Edit Find Find Differences (Найти различия). Используйте инструменты Point and Shoot в диалоговом окне Find Differences, чтобы выбрать два файла для сравнения. Нажмите кнопку OK (рис. 208.1).
Рис. 208.1. Выполните команду Edit Find Find Differences и выделите два файла для сравнения
Поиск различий только в тексте Команда Find Differences работает только с файлами маркеров (например, HTML и CSS), являющимися, по сути дела, текстовыми файлами. Эта команда не будет функционировать с файлами в двоичном формате, к примеру , GIF, JPEG или PDF.
В следующем диалоговом окне вы увидите кодировку для двух файлов; различия будут выделены (рис. 208.2). Активируйте опцию Synchronize Scrolling (Синхронизировать скроллинг), чтобы одновременно пролистывать обе кодировки. Все различия между двумя файлами указаны в нижней части диалогового окна. Здесь вы можете щелкнуть по любому объекту, чтобы перейти к соответствующей строке на странице.
Рис. 208.2. Диалоговое окно Find Differences позволяет находить и сравнивать различия в кодировке для двух файлов
ГЛАВА 10
Сложное управление сайтом
295 СОВЕТ
209
Запуск запросов для сайта
Программа GoLive CS2 имеет мощную функцию поиска, запрос (query), которая позволяет искать файлы на сайте с использованием разнообразных критериев. Вы можете выполнить запрос для всего сайта, для выбранных файлов на сайте или для результатов другого запроса. Вы создаете запросы в редакторе Query Editor. Чтобы открыть этот редактор, выполните команду Edit Queries (рис. 209.1). Нажмите кнопку New Query (Новый запрос), чтобы создать новый запрос или выбрать существующий запрос в списке. Нажмите кнопку Edit Query (Редактировать запрос). Откроется редактор Query Editor (рис. 209.2).
Рис. 209.1. Если вы выберете в меню Edit пункт Run Query (Выполнить запрос), откроется диалоговое окно Query
Рис. 209.2. Если вы выберете команду New Query или Edit Query, откроется редактор Query Editor
СОВЕТ 209: Запуск запросов для сайта
Поиск метаданных XMP с использованием запросов В программе GoLive CS2 появилась новая возможность создания запросов, которые выполняют поиск метаданных XMP (см. Совет 27). Это позволяет найти изображения с определенными титрами, авторскими правами или ключевыми словами.
296 Поиск заголовков страниц по умолчанию Во встроенные запросы добавлен критерий поиска ошибок, который позволяет, помимо прочего, найти страницы с заголовками по умолчанию. Выполните поиск, чтобы быстро найти такие страницы и изменить их заголовки. Помните о том, что для правильного индексирования веб-страниц большинство систем поиска применяет заголовки страниц. Чем точнее заголовки страниц, тем лучше.
ГЛАВА 10
Щелкните по стрелке с текстом «Find What?», чтобы открыть ниспадающее меню с критериями поиска. Когда вы выберете критерий, соответствующие опции отобразятся в нижней части редактора Query Editor. Воспользуйтесь данными опциями для настройки параметров поиска. Чтобы добавить дополнительные критерии, щелкните по небольшой круглой кнопке со стрелкой . Вы сможете выбрать новый критерий с использованием таких опций, как «и», «или» и «нет». Для удаления критерия щелкните по круглой кнопке справа от меню Find What. Завершив подготовку запроса, нажмите кнопку Test Query (Протестировать запрос), чтобы проверить запрос. После этого вы сможете сохранить результаты в виде коллекции или использовать их для другого запроса, проверки или операции Find. Когда вы закроете редактор Query Editor, вас спросят о том, хотите ли вы сохранить запрос. Если вы согласитесь, введите название запроса и сохраните его в папку вашего сайта.
Сложное управление сайтом
297 СОВЕТ
210
Изучение коллекций
Как правило, ваш сайт содержит отдельные файлы, которые вы редактируете чаще, чем другие. Разве не было бы удобно, если бы вы могли получить доступ к данным файлам и не просматривать все папки сайта? Воспользуйтесь новой функцией программы GoLive, Collections (Коллекции). Выполните следующие действия, чтобы создать коллекцию: 1. Щелкните по вкладке Collections в верхней части окна Site. 2. Нажмите кнопку Create New Collection (Создать новую коллекцию) на панели инструментов . 3. Введите название коллекции. 4. Переместите файлы с вкладки Files окна Site в новую папку коллекций на вкладке Collections. Вот и все. Если вам понадобится данная коллекция файлов, откройте коллекцию и используйте нужные файлы (рис. 210.1).
Рис. 210.1. Коллекции позволяют сгруппировать вместе те файлы, которые вам часто приходится редактировать. Это особенно полезно в том случае, если данные файлы трудно найти в структуре папок
СОВЕТ 210:Изучение коллекций
Связываем коллекции в динамичные запросы Чтобы создать коллекцию, вы можете сохранить результаты операции Find, результаты проверки синтаксиса или результаты запроса. В любом случае, в окне результатов отобразится кнопка Save Collection (Сохранить коллекцию). Также вы можете выделить коллекцию и привязать ее к запросу с помощью поля флажка Attach (Прикрепить) на палитре Inspector. Затем выберите запрос в списке. Чтобы обновить вашу коллекцию, нажмите кнопку Run (Выполнить) и запустите запрос.
298 СОВЕТ
211 Сначала выполните резервное копирование Обязательно предварительно выполните резервное копирование вашего сайта на случай, если вы допустите ошибку. Просто поверьте, – потом вы скажете нам спасибо.
Очистка сайта
Программа GoLive предлагает способ удаления неиспользуемых файлов и исправления ошибок, связанных с зависшими файлами (см. Совет 202). Откройте окно Site и выполните команду Site Update Clean Up Site (Сайт Обновить Очистить сайт), чтобы удалить неиспользуемые файлы. Откроется диалоговое окно с набором опций для удаления и добавления файлов на сайт (рис. 211.1).
Рис. 211.1. Выберите нужные опции в диалоговом окне Clean Up Site
Сделав выбор, нажмите кнопку OK. Программа GoLive просмотрит файлы и откроет еще одно диалоговое окно со списком файлов, которые будут удалены или добавлены (рис. 211.2).
Рис. 211.2. Перед завершением операции вы увидите список файлов, которые будут удалены или добавлены
Вы можете выбрать файлы в данном списке. После этого нажмите кнопку OK, чтобы завершить процесс. В редких случаях, программа GoLive может сообщить о том, что не существует ссылок на файлы данной сайта (то есть все файлы следует удалить). Это произойдет при условии, что программа GoLive не имеет информации о том, какой файл является домашней страницей для вашего сайта. Чтобы решить проблему, выберите домашнюю страницу на корневом уровне окна Site и нажмите кнопку Home Page (Домашняя страница) в разделе Page палитры Inspector.
ГЛАВА 10
Сложное управление сайтом
299
ГЛАВА 11
Публикация вашего сайта Вы многому научились, затратили много усилий, и теперь вы хотите, чтобы ваш сайт увидел мир. Перед тем как загружать ваш сайт на веб-сервер, необходимо купить доменное имя и создать учетную запись (если вы еще этого не сделали). Существует большое количество служб, предоставляющих доменные имена; мы больше всего любим работать со службами www.godaddy.com и www.dotster.com (к тому же цены на этих сайтах невелики). Какую бы службу регистрации вы не выбрали, обязательно убедитесь в том, что она была утверждена в списке по адресу: www. icann.org/registrars/accredited-list.html. Далее вы должны найти провайдера хостинга, который предоставит сервис и поддержку по устраивающей вас цене. Программа GoLive использует такие стандартные Internet-протоколы, как FTP и WebDAV, поэтому вам не придется беспокоиться о том, чтобы найти определенную компанию-провайдер. В качестве провайдера советуем выбрать www.golivehost.com или www.mediatemple.net. После этого вы будете готовы к загрузке сайта. Несколько разделов в начале данной главы посвящены базовым настройкам и методикам; очень скоро мы перейдем к более сложным Советам.
11_GoLive_T&T_(299-316)_rus.indd 299
01.02.2006 2:40:50
300 СОВЕТ
212 Пароль сохраняется по умолчанию Обратите внимание: опция Save Password (Сохранить пароль) выбрана по умолчанию. Если вас не заботит проблема обеспечения безопасного доступа к вашему компьютеру , вы можете сохранить установку по умолчанию и избавиться от необходимости вводить пароль при каждом подключении к серверу. Если вы хотите запретить другим пользователям доступ к компьютеру , уберите флажок из этого поля и не вводите здесь пароль. Вы обеспечите безопасность сервера, но придется вводить пароль при каждом подключении к нему.
Создание и редактирование настроек сервера
Программа GoLive управляет всеми настройками сервера из одного меню; больше не придется сохранять параметры на каждом сайте, а затем повторять их ввод снова и снова. Выполните команду File Server Favorites , и вы увидите диалоговое окно Edit Server (Редактировать настройки сервера), как показано на рис. 212.1. Введите настройки один раз, и они станут доступны для всех сайтов, с которыми вы работаете, а также для встроенного FTPбраузера (см. Совет 223).
Рис. 212.1. Вы можете управлять всеми настройками сервера из одного меню
Нажмите кнопку New , чтобы создать новую запись, затем введите ее название. Скорее всего, в качестве протокола вы выберете FTP; также вы сможете выбрать протокол http (WebDAV) и опцию File (локальный файловый сервер). Далее введите адрес сервера (IP или имя), папку, имя пользователя и пароль, предоставленный вашим провайдером или сетевым администратором. Если вы не знаете путь, щелкните по иконке Browse в поле Directory, и программа GoLive попытается найти сервер за вас. Чтобы создать новую запись, являющуюся аналогом существующей записи, выберите ее в списке и щелкните по иконке Duplicate (Копировать) . Это позволит сэкономить время в случае, если вы лишь хотите немного изменить ваш сайт и сохранить его на другом сервере.
ГЛАВА 11
11_GoLive_T&T_(299-316)_rus.indd 300
Публикация вашего сайта
01.02.2006 2:40:55
301 СОВЕТ
213
Тестирование серверных подключений
В Совете 212 вы научились вводить настройки протокола FTP, которые позволяют загрузить сервер в сеть Internet. Но как узнать, правильно вы ввели настройки или нет? Вы можете ввести параметры, привязать их к вашему сайту и попробовать подключиться к нему, чтобы проверить, функционирует ли сайт. Однако это довольно сложно и долго. Поэтому в данном разделе мы дадим совет, как протестировать настройки FTP. После ввода всех необходимых параметров протокола, включая сервер, имя пользователя и пароль, нажмите кнопку Browse . Программа GoLive обратится к серверу и проверит подключение в ходе тестирования структуры папок. Если вы увидите нужный список файлов, это значит, что настройки были введены правильно (рис. 213.1).
Рис. 213.1. Если вы увидите нужный список файлов, это значит, что настройки были введены правильно
Если вы увидите диалоговое окно с предупреждением, это значит, что вы допустили ошибку (рис. 213.2). Чаще всего имеют место ошибки при вводе имени пользователя или пароля; проверьте все настройки и попробуйте еще раз.
Рис. 213.2. Если в диалоговом окне Edit Server вы увидите окно с предупреждением, это значит, что вы допустили ошибку
СОВЕТ 213: Тестирование серверных подключений
11_GoLive_T&T_(299-316)_rus.indd 301
01.02.2006 2:40:56
302 СОВЕТ
214
Использование соединения Secure FTP
Протокол FTP (File Transfer Protocol) был создан в начале 1970-ых годов; он используется почти всеми веб-дизайнерами для загрузки и перемещения файлов на веб-серверах. Однако многие веб-дизайнеры не знают о том, что стандартный протокол FTP не шифрует отправляемые данные (включая имя пользователя и даже пароль). Это значит, что обычный протокол FTP передает данные, к которым теоретически могут получить доступ посторонние лица. Не стоит и говорить о том, что это совершенно недопустимо для людей и компаний, которые занимаются бизнесом в сети Internet, работой с кредитными картами или передачей конфиденциальной информации. Решение данной проблемы заключается в использовании безопасного соединения между FTP-клиентом (программой GoLive) и веб-сервером. Нажмите кнопку Advanced в окне редактирования настроек сервера и выберите протокол SSL (Secure Sockets Layer), SSH (Secure Shell) или SFTP (Secure File Transfer Protocol). За дополнительной информацией о том, какой протокол следует выбрать, и какие параметры вы должны ввести в разделе Security (Безопасность) диалогового окна Advanced FTP Options, обратитесь к вашему провайдеру или сетевому администратору (рис. 214.1).
Рис. 214. 1. За дополнительной информацией о том, какой протокол следует выбрать, и какие параметры безопасности вы должны ввести, обратитесь к вашему провайдеру или сетевому администратору
ГЛАВА 11
11_GoLive_T&T_(299-316)_rus.indd 302
Публикация вашего сайта
01.02.2006 2:40:56
СОВЕТ
215
Вводим настройки протокола FTP для веб-сайтов
303
После ввода всех настроек сервера (см. Совет 212) откройте окно Site и выберите пункты меню Site Settings. Выберите опцию Publish Server (Разместить сервер) слева. Выберите название сервера в списке (рис. 215.1). Если сервер, к которому вы хотите подключиться, отсутствует в списке, вы сможете ввести его параметры в нижней части окна. После ввода настроек сервера вы сможете нажать кнопку Favorites и добавить параметры нового сервера в список.
Рис. 215.1. Откройте диалоговое окно Site Settings и привяжите сервер к вашему веб-сайту
Настройки сервера, которые вы привязываете к сайту, сохраняются в параметрах программы и в файле sitename/web-settings/ siteServersettings.xml (в зашифрованном виде). Это значит, что, если вы отправите данный сайт клиенту или переместите его на другой компьютер, все настройки будут перемещены вместе с сайтом, и вам не придется вводить их снова. Достаточно просто скопировать папку проекта, включая файл Site, корневую папку, папку Data и папку Settings.
СОВЕТ 215: Вводим настройки протокола FTP для веб-сайтов
11_GoLive_T&T_(299-316)_rus.indd 303
01.02.2006 2:40:56
304 СОВЕТ
216 Устранение ошибок в FTP-подключениях Если у вас возникли проблемы с подключением к серверу , проверьте, включен ли режим Passive Mode (Пассивный режим) в разделе Advanced настроек сервера. Часто данный режим позволяет устранить неполадки, особенно в случае, если при подключении к серверу вы не можете открыть список файлов. Также вы можете активировать опцию Standard Framework (Стандартная рамка).
Подключение к серверу, на котором размещен сайт
После ввода настроек сервера и их привязки к сайту вы сможете подключиться к серверу несколькими способами. Проще всего щелкнуть по иконке Connect to Publish Server (Подключиться к серверу сайта) на панели инструментов (рис. 216.1). Также вы можете выполнить команду Site Publish Server Connect. Рис. 216.1. Вы можете щелкнуть по иконке Connect to Publish Server, чтобы подключиться к серверу сайта
После подключения к серверу вы увидите список локальных файлов на вкладке Files слева, а список файлов сервера – на вкладке Publish Server справа (рис. 216.2). Это значит, что вы можете подключиться к серверу и выполнить загрузку файлов в окне Site программы GoLive. Вам не нужно покупать или запускать другие программы: все необходимые функции встроены в GoLive.
Рис. 216.2. В окне Site вы видите локальные файлы и файлы сервера
Чтобы отключиться от сервера, щелкните по иконке Disconnect (Отключиться) на панели инструментов, либо выполните Ctrl+щелчок (Mac) или щелчок правой кнопкой мыши (Windows) на вкладке Publish Server в окне Site и выберите команду Disconnect (рис. 216.3). Рис. 216.3. Методика отключения от сервера аналогична методике подключения к нему
ГЛАВА 11
11_GoLive_T&T_(299-316)_rus.indd 304
Публикация вашего сайта
01.02.2006 2:40:56
305 СОВЕТ
217
Подключение к нескольким серверам
Вы должны четко понимать то, что подключиться к FTP-серверу нетрудно. Тысячи людей делают это каждый день. Однако программа GoLive поддерживает очень удобную функцию, которая позволяет одновременно подключаться к нескольким серверам. В результате вы сможете переключаться между серверами одним щелком мыши. Привяжите все сервера к панели Publish Server в окне Site Settings, как показано на рис. 217.1.
Управление тестовыми и рабочими серверами Многие веб-дизайнеры предпочитают сначала загружать сайты на тестовые сервера для просмотра и выполнять загрузку на рабочие сервера только после утверждения. Функция подключения к нескольким серверам программы GoLive существенно упрощает данный процесс.
Рис. 217.1. Чтобы переключаться между несколькими серверами, привяжите их к панели Publish Server в окне Site Settings
После подключения к серверу вы сможете перейти на другой сервер. Для этого выберите название сервера в списке подменю Site Publish Server Active Server (рис. 217.2).
Рис. 217.2. Вы можете переключаться между серверами из меню Site Publish Server
СОВЕТ 217: Подключение к нескольким серверам
11_GoLive_T&T_(299-316)_rus.indd 305
01.02.2006 2:40:57
306 СОВЕТ
218
Загрузка файлов на сервер
Вы можете перемещать файлы между вкладками Files и Publish Server в окне Site, чтобы выполнять загрузку файлов на сервер. Однако эта методика чревата ошибками. Программа GoLive способна отслеживать файлы, которые вы хотите загрузить на сервер. Существуют три команды загрузки (рис. 218.1): • Upload All (Загрузить все). Вы будете использовать данную команду во время первой загрузки сайта на сервер, потому что она загружает на веб-сервер все локальные файлы; • Upload Selection (Загрузить выбранные файлы). Данная команда загружает все выбранные файлы из вкладки Files окна Site на веб-сервер. Кроме того, эта функция способна правильно загружать на веб-сервер различные файлы, которые были выбраны во вложенных папках; • Upload Modified Files (Загрузить измененные файлы). Загружает с вашего жесткого диска только те файлы, которые были изменены после предыдущей загрузки на сервер. Диалоговое окно позволяет подтвердить выбор файлов для загрузки.
Рис. 218.1. Три команды в меню Site дают возможность ускорить загрузку файлов на серве
ГЛАВА 11
11_GoLive_T&T_(299-316)_rus.indd 306
Публикация вашего сайта
01.02.2006 2:40:57
307
Для того чтобы начать процесс передачи файлов на веб-сервер, нажмите кнопку Upload на панели инструментов. Вы можете использовать кнопку двумя способами. Нажмите и удерживайте кнопку, чтобы открыть список команд, о которых мы рассказали выше. Если вы нажмете кнопку один раз, будет вызвана команда, выбранная в подменю Change Button To (Изменить кнопку на). Если кнопка была настроена на команду Upload Modified, будет начата загрузка измененных файлов на сервер (рис. 218.2).
Рис. 218.2. Настройте параметры кнопки Upload на панели инструментов
Загрузка файлов Справа от кнопки Upload на панели инструментов располагается кнопка Download. Вы можете не только отправлять файлы на веб-сервер, но и загружать файлы с него. Кнопка Download функционирует аналогично кнопке Upload. Удерживайте кнопку нажатой, чтобы открыть список команд, либо нажмите ее один раз, чтобы начать процесс загрузки в соответствии с настройками в подменю Change Button To.
СОВЕТ 218: Загрузка файлов на сервер
11_GoLive_T&T_(299-316)_rus.indd 307
01.02.2006 2:40:57
308 СОВЕТ
219
Обработка скрытых файлов
Веб-дизайнеры часто используют текстовые файлы .htaccess для управления параметрами доступа к определенным папкам на веб-сервере. Если вы не знакомы с подобными файлами, вы можете ознакомиться с документацией Apache, популярного веб-сервера, или обратиться к вашему провайдеру. Вы можете без проблем сконфигурировать ваш веб-сервер с помощью подобных файлов .htaccess. Однако если вы работаете в среде Mac, все далеко не так просто. Сложность заключается в том, что операционная система Mac OS X воспринимает любой файл, начинающийся с периода, как скрытый. Предыдущие версии программы GoLive и приложение Mac OS X Finder не могут отображать скрытые файлы без дополнительных настроек. Программа GoLive CS2 отображает все скрытые файлы на вкладке Files в окне Site и позволяет работать с ними (рис. 219.1).
Рис. 219.1. В отличие от Mac OS X Finder, программа GoLive CS2 отображает скрытые файлы
ГЛАВА 11
11_GoLive_T&T_(299-316)_rus.indd 308
Публикация вашего сайта
01.02.2006 2:40:57
309 СОВЕТ
220
Синхронизация обновления файлов
Синхронизация файлов в окне Site и файлов на веб-сервере может быть нарушена по нескольким причинам, включая: • перемещение или обновление файлов на сервере другим пользователем; • изменение или повреждение файла Site в программе GoLive; • изменение конфигурации веб-сервера (в том числе изменение настроек даты/времени). Если в окне Site от вас требуют обновить файлы, которые (как вы знаете) в обновлении не нуждаются, откройте окно Site и выполните команду Site Publish Server Sync Modification Times All (Синхронизовать время обновления Все), как показано на рис. 220.1. Может показаться, что вы загрузили на сервер новые файлы. На самом деле, данная команда лишь синхронизировала время обновления файлов на удаленном сервере и на вашем компьютере.
Сравнение файлов Если вы хотите найти различия между локальными и удаленными файлами перед тем, как определиться с загрузкой или синхронизацией, программа GoLive предоставит такую возможность. Выделите страницу на вкладке Files в окне Site и выполните команду Site Publish Server Show Differences to Server File (Показать различия с файлом на сервере). Программа GoLive покажет все различия между двумя файлами. Обратите внимание: вы можете выполнять данную команду только при работе с текстовыми файлами (например, с файлами CSS и HTML), но не с изображениями или файлами мультимедиа.
Рис. 220.1. Если у вас возникли проблемы с обновлением файлов, синхронизируйте время обновления на сервере
Если вам необходимо синхронизировать определенную груп пу файлов и папок, выделите их на вкладке Files в окне Site и выполните команду Site Publish Server Sync Modification Times Selection (Выбранные файлы). Эта функция может оказаться полезной в случае, если вы переместили на сервер объемные файлы (например, видео) и не хотите загружать их повторно только для того, чтобы синхронизировать файлы в окне Site.
СОВЕТ 220: Синхронизация обновления файлов
11_GoLive_T&T_(299-316)_rus.indd 309
01.02.2006 2:40:57
310 СОВЕТ
221
Синхронизация файлов и удаление лишних файлов с сервера
Если с одним сайтом работают несколько дизайнеров, синхронизация файлов может оказаться непростой задачей. Новая команда Synchronize (Синхронизировать) помогает вовремя обновлять файлы, а также позволяет наконец-то выполнить требования клиентов по удалению с сервера устаревших файлов. Чтобы воспользоваться данной функцией, откройте окно Site, подключитесь к серверу сайта и выполните команду Site Publish Server Synchronize All (Синхронизировать все). Также вы можете щелкнуть по иконке Synchronize на панели инструментов, чтобы открыть диалоговое окно Synchronize. Программа GoLive сравнит локальные и удаленные файлы, а затем откроет список с файлами (рис. 221.1).
Рис. 221.1. Диалоговое окно Synchronize позволяет загружать и удалять файлы с сервера
ГЛАВА 11
11_GoLive_T&T_(299-316)_rus.indd 310
Публикация вашего сайта
01.02.2006 2:40:57
311
Проверьте файлы в списке и выберите в ниспадающем меню команду, которую вы хотите выполнить с определенной парой файлов. После этого нажмите кнопку OK, и программа GoLive синхронизирует файлы. • Skip (Пропустить). Это действие используется по умолчанию. Обычно вы не изменяете данную настройку для большинства файлов; • Upload (Загрузить на сервер). Если удаленный файл устарел, выберите эту команду; • Download (Загрузить с сервера). Если локальный файл устарел, выберите эту команду; • Delete (Удалить). Если удаленный файл больше не нужен, вы можете его удалить. Будьте очень внимательны и не удалите с сервера такие необходимые файлы, как скрипты и базы данных.
СОВЕТ 221: Синхронизация файлов и удаление лишних файлов с сервера
11_GoLive_T&T_(299-316)_rus.indd 311
01.02.2006 2:40:58
312 СОВЕТ
222 Автоматическая оптимизация библиотеки JavaScript Выберите эту опцию, чтобы оптимизировать библиотеку JavaScript (GeneratedItems/ CSScriptLib.js) во время каждой загрузки файлов с вашего сайта. В результате оптимизации библиотека будет использовать только те функции, которые нужны для сайта. Это приведет к сокращению времени загрузки сайта (см. Совет 187).
Упрощение исходной кодировки
Программа GoLive предлагает очень мощные инструменты редактирования, которые позволят сэкономить много времени. Достаточно часто эти инструменты усложняют исходную кодировку. Например, если вы используете шаблоны, в исходную кодировку добавляются дополнительные тэги-примечания. Во время форматирования исходной кодировки в нее добавляются дополнительные отступы. Если необходимо добиться соответствия исходной кодировки определенным стандартам, программа GoLive может удалить лишние элементы кодировки и загрузить ее в упрощенном формате. Для этого выполните команду Site Settings и выберите панель Upload/Export слева. Отметьте поле флажка Site Specific Settings (Специальные настройки сайта) в верхней части диалогового окна и посмотрите на раздел Cleanups (рис. 222.1). Вы можете настроить программу GoLive на упрощение кодировки при каждой загрузке или экспорте сайта.
Рис. 222.1. Для управления форматированием исходной кодировки воспользуйтесь настройками в диалоговом окне Site Settings
• Adobe GoLive Elements (Элементы Adobe GoLive). Специальные тэги для таких функций, как действия JavaScript и компоненты; • Comments (Примечания). Любые примечания в исходной кодировке, включая те примечания, которые используются для управления шаблонами; • Spaces (Отступы). Любые дополнительные отступы, применяющиеся для форматирования исходной кодировки. Упрощение исходной кодировки не влияет на функционирование страниц в веб-браузере, однако уменьшение количества отступов приводит к ухудшению читабельности кодировки. Если вы упрощаете элементы в программе GoLive, повторное редактирование таких элементов, как компоненты и действия JavaScript, будет усложнено.
ГЛАВА 11
11_GoLive_T&T_(299-316)_rus.indd 312
Публикация вашего сайта
01.02.2006 2:40:58
313 СОВЕТ
223
Использование встроенного FTP- клиента
В основном вы будете использовать FTP-инструменты, которые встроены в окно Site и вкладку Publish Server программы GoLive. Время от времени вам понадобится быстро загружать на FTP-сервер объекты, не связанные с текущим сайтом. Например, во время работы над данной книгой мы загружали на ее сервер большое количество скрин-шотов и PDF-файлов. Вместо того чтобы запускать отдельный FTP-клиент, мы использовали встроенный FTP-клиент программы GoLive, который вызывается с помощью команды File Server Connect to FTP (Подключиться к FTP-серверу). См. рис. 223.1.
Загрузка страницы Вы можете поискать различные варианты дизайна страницы в сети Internet. Если вы найдете интересную страницу , вы сможете ее загрузить с помощью команды File Server Download Page (Загрузить страницу). Скопируйте URL-адрес страницы и вставьте его в открывшееся диалоговое окно. Программа GoLive загрузит страницу и откроет ее в редакторе Layout Editor. Здесь вы сможете отредактировать дизайн страницы. Учитесь, но не воруйте чужие идеи.
Рис. 223.1. Для передачи файлов воспользуйтесь встроенным FTP-клиентом программы GoLive
В этом окне вы можете выбрать сервер для подключения и нажать кнопку Connect (Подключиться). После подключения вы сможете использовать кнопки на панели инструментов для создания новых папок и удаления файлов, а также загружать файлы на сервер, перемещая их в окно. Завершив изменения, нажмите кнопку Disconnect.
СОВЕТ 223: Использование встроенного FTP- клиента
11_GoLive_T&T_(299-316)_rus.indd 313
01.02.2006 2:40:58
314 СОВЕТ
224 Сохранение в виде текстового файла Если вашему провайдеру или сетевому администратору требуется копия вашего файла журнала, откройте окно Log и выполните Ctrl+щелчок (Mac) или щелчок правой кнопкой мыши (Windows) на записи в журнале. Выберите пункт меню Save As, чтобы создать текстовый файл, который вы можете распечатать или отправить по электронной почте.
Устранение неполадок с помощью журналов сервера
Если вы когда-либо пробовали подключиться к серверу, скорее всего, вам приходилось иметь дело с ошибками. Вы неправильно ввели пароль? Время ожидания сервера истекло? Не важно, что именно произошло. Существует очень много проблем, которые не позволяют подключиться к серверу. К счастью, программа GoLive включает инструменты диагностики, которые позволяют устранять подобные неполадки. Если у вас возникли проблемы при подключении к серверу, выполните команду File Log (Журнал). Откроется окно Log, в котором отображаются последние ошибки (рис. 224.1). Используйте эти сведения, чтобы проконсультироваться с вашим провайдером по поводу ошибок. Если вы хотите получать более подробную информацию, выберите панель Log в окне настройки параметров программы и активируйте опции Warnings (Предупреждения) и Status Messages (Сообщения статуса). Вы даже можете выбрать количество сессий журнала для сохранения (рис. 224.2).
Рис. 224.1. Откройте окно Log, чтобы исправить последние ошибки при подключении к серверу
Рис. 224.2. Используйте параметры Log, чтобы выбрать сведения, которые будут записаны в журнал
ГЛАВА 11
11_GoLive_T&T_(299-316)_rus.indd 314
Публикация вашего сайта
01.02.2006 2:40:58
СОВЕТ
225
Поиск файлов в окне Local File Browser или в Adobe Bridge
315
В меню File Server имеется еще одна команда, Browse File System (Система поиска файлов). Эта опция открывает стандартное диалоговое окно, которое позволяет найти папку в сети. Программа GoLive откроет данную папку и отобразит ее содержимое в окне Local File Browser. Вы можете изменить параметры просмотра данного окна; для этого выполните Ctrl+щелчок (Mac) или щелчок правой кнопкой мыши (Windows) и выберите опцию в подменю View (Вид). Опция Thumbnails отображает данные в окне так же, как в программе Adobe Bridge, поставляющейся с GoLive CS2, и в других программах Adobe. Вы даже можете переместить файлы из окна Local File Browser на вкладку Files в окне Site. Данная функция довольно удобна, но найти нужный файл в списке из сотен фотографий может оказаться непростой задачей, на которую вы потратите много времени. Чтобы решить проблему, воспользуйтесь программой Adobe Bridge. Новое приложение Adobe Bridge упрощает поиск файлов и добавление веб-сайтов в список Favorites в программе GoLive. Чтобы открыть Adobe Bridge, выполните команду File Browse или щелкните по иконке Bridge на панели инструментов. Программа Adobe Bridge является самостоятельным приложением, которое напоминает устаревшую программу Photoshop File Browser. Сейчас Adobe Bridge поддерживается всеми приложениями, входящими в пакет Creative Suite. Данная программа напоминает центр управления процессами. Вы можете перемещаться по вашему жесткому диску в верхнем левом углу окна Bridge, просматривать копии изображений справа, а также открывать изображения слева. Вы даже можете изменять настройки размера и дизайна копий изображения с помощью кнопок управления в правом нижнем углу окна Bridge (рис. 225.1).
СОВЕТ 225: Поиск файлов в окне Local File Browser или в Adobe Bridge
11_GoLive_T&T_(299-316)_rus.indd 315
01.02.2006 2:40:58
316 Режим Compact Mode Программа Adobe Bridge – это очень эффективное новое приложение в пакете Creative Suite. В конфигурации по умолчанию Adobe Bridge функционирует как окно, а не как плавающая палитра. Это значит, что, если вы переключитесь из Adobe Bridge в другое приложение (например, в GoLive), вы больше не увидите окно Bridge. Если вам необходимо одновременно видеть два окна, щелкните по иконке Compact Mode (Режим Compact) в верхнем правом углу окна Bridge и выберите опцию «Compact Window Always On Top» (Окно режима Compact всегда вверху) в плавающем меню. Теперь окно Bridge будет функционировать как плавающая палитра, которая доступна для любого другого приложения.
ГЛАВА 11
11_GoLive_T&T_(299-316)_rus.indd 316
Рис. 225.1. Вы можете находить изображения на сайте в новой программе Adobe Bridge
Когда вы найдете нужное изображение для веб-сайта, переместите файл на вкладку Files в окне Site программы GoLive. При этом файл будет скопирован в окно Site. Вы сможете затем использовать файл как объект Smart. Если вы поместите изображение на веб-страницу как объект Smart (см. Совет 141), вы сможете переместить исходное изображение из программы Bridge в редактор Layout Editor программы GoLive. Особенно удобно применять данную функцию для изображений в формате JPEG, загруженных с цифровой камеры (см. Совет 143).
Публикация вашего сайта
01.02.2006 2:40:58
317
ГЛАВА 12
Создание версий файлов с помощью Adobe Version Cue Программа Adobe GoLive CS2 предлагает различные инструменты для создания версий файлов, включая версии в папках, поддержку CVS, создание версий через протокол FTP и поддержку Perforce. Интеграция GoLive в пакет Creative Suite обеспечивает максимальную эффективность встроенной системы создания версий файлов, Version Cue. В этой главе мы покажем, как создавать новый проект Version Cue, как преобразовывать существующий сайт в проект Version Cue, как управлять подобным проектом и использовать функции, которые предлагает вам Version Cue. Вы научитесь создавать версию документа, возвращаться к предыдущей версии, сравнивать версии между собой и так далее. За дополнительной информацией обратитесь к новому приложению Adobe Help Center (см. Совет 10). Там вы найдете большое количество полезных советов по применению программы Version Cue вместе с другими приложениями из пакета Creative Suite 2.
12_GoLive_T&T_(317-334)_rus.indd 317
02.02.2006 1:41:57
318 СОВЕТ
226 Запустите Version Cue на отдельном сервере По молчанию во время установки пакета Creative Suite система Version Cue CS2 устанавливается на ваш компьютер и активируется автоматически. Если вы предпочитаете запустить систему Version Cue на другом компьютере (чтобы разрешить доступ к системе для других пользователей сети), измените параметры установки Creative Suite по умолчанию. Уберите Version Cue из списка, чтобы не устанавливать систему на локальном компьютере. Затем запустите программу установки на втором компьютере (сервере) и отключите все программы, кроме Version Cue CS2. Приложение Version Cue CS2 будет установлено на втором компьютере. В экране загрузки меню Advanced Administration вы сможете найти сетевой адрес, который требуется другим пользователям для доступа к Version Cue (см. примечание к Совету 227).
Введение в Version Cue
Что такое Version Cue? Version Cue – это система управления файлами и версиями файлов, включенная в пакет Adobe Creative Suite. Она впервые появилась в первой версии Creative Suite; в программе GoLive CS2 система Version Cue стала более надежной и простой в использовании. Если у вас есть только программа GoLive CS2, это значит, что у вас нет системы Version Cue, потому что данная система является компонентом Adobe Creative Suite 2. Любая из программ Adobe (GoLive CS2, Photoshop CS2, Illustrator CS2, InDesign CS2 и Acrobat 7 Professional) может встраиваться в рабочую версию Version Cue. Программа Version Cue представляет собой сервер, на котором вы можете создавать проекты и управлять ими с помощью функций, позволяющих, к примеру, обмениваться файлами с коллегами. Проекты Version Cue могут включать документы любого типа; вы можете открывать эти документы в новом приложении Adobe Bridge или в окне Site программы GoLive. После завершения установки Adobe Creative Suite 2 пользователи Mac 2 увидят новую иконку в меню Finder ; пользователи Windows найдут новую иконку на панели задач. Это значит, что приложение Version Cue было установлено и работает на локальном компьютере. В обоих случаях, вы сможете воспользоваться этой иконкой для доступа к важным функциям Version Cue, например, к настройкам Version Cue и меню Advanced Administration (рис. 226.1). Рис. 226.1. Вы можете получить доступ к настройкам Version Cue и меню Advanced Administration из меню Version Cue, которое находится в строке Finder или на панели задач Windows
Из этого меню вы можете включать и выключать Version Cue. Если система Version Cue отключена, на иконке отображается символ в виде красного креста . Выберите команду Turn Version Cue CS2 On (Включить Version Cue), чтобы включить Version Cue; выберите команду Off, чтобы отключить Version Cue. При запуске программы иконка имеет серый цвет; постепенно она становится зеленой. Если иконка полностью приобрела зеленый цвет, это значит, что система Version Cue готова к работе.
ГЛАВА 5
12_GoLive_T&T_(317-334)_rus.indd 318
Работа с каскадными таблицами стилей
02.02.2006 1:42:04
319 СОВЕТ
227
Создание проекта Version Cue
Существует несколько способов создания проекта Version Cue; в этом разделе мы поговорим о двух способах. Сначала мы покажем, как создать проект в Adobe Bridge, затем мы создадим проект в GoLive CS2. Также вы можете создать проект в Photoshop, Illustrator, InDesign или в меню Advanced Administration приложения Version Cue.
Создание проекта в Adobe Bridge Чтобы быстро создать проект Version Cue, откройте приложение Adobe Bridge и выполните команду Tools Version Cue New Project (Новый проект). Откроется диалоговое окно New Project с полями, в которых вы можете ввести название проекта и информацию о нем. Если вы планируете работать над проектом вместе с другими дизайнерами, добавьте галочку в поле Share this project with others (Обменяться проектом с другими пользователями), как показано на рис. 227.1. После этого нажмите кнопку OK.
Рис. 227.1. При создании нового проекта в Adobe Bridge используйте описательное название. Также советуем ввести информацию о проекте в поле Project Info (Сведения о проекте)
СОВЕТ 227: Создание проекта Version Cue
12_GoLive_T&T_(317-334)_rus.indd 319
02.02.2006 1:42:05
320 После создания проекта вы можете щелкнуть по опции Version Cue на вкладке Favorites в программе Bridge, чтобы его просмотреть. Если вы поместите курсор мыши на иконку проекта, откроется экранная подсказка с метаданными проекта, которые включают информацию, введенную во время создания проекта (рис. 227.2).
Рис. 227.2. Из приложения Adobe Bridge вы можете открывать проекты Version Cue и просматривать связанную с ними информацию
Создав проект, вы сможете конвертировать существующий сайт GoLive в сайт Version Cue и сохранить его вместо любого существующего проекта Version Cue. Для конвертирования сайта GoLive в сайт Version Cue необязательно предварительно создавать проект Version Cue. В следующем разделе вы научитесь создавать новый проект Version Cue непосредственно из программы GoLive.
Создание проекта в GoLive CS2 Вы можете создавать новые сайты Version Cue или конвертировать существующие сайты в сайты Version Cue непосредственно из программы GoLive. Выполните следующие действия, чтобы конвертировать существующий сайт: 1. Откройте сайт и выберите пункты меню Site Settings. 2. Выберите в нижней части списка слева пункт Version Control (Управление версией).
ГЛАВА 5
12_GoLive_T&T_(317-334)_rus.indd 320
Работа с каскадными таблицами стилей
02.02.2006 1:42:05
321 3. Активируйте опцию Use Version Control (Использовать управление версией) в верхней части диалогового окна Settings (рис. 227.3).
Загрузка страницы Advanced Administration Используя иконку Version Cue CS2 в окне Finder или на панели задач Windows, выберите опцию Advanced Administration. Откроется ваш веб-браузер, в котором отобразится страница загрузки. Система ввода паролей и имен пользователей, использующаяся по умолчанию, отображается на странице над соответствующими полями.
Рис. 227.3. Чтобы конвертировать существующий сайт в сайт Version Cue, активируйте опцию Version Control в настройках сайта
4. Выберите в ниспадающем списке Version Control System (Система управления версиями файлов) пункт Version Cue. Программа GoLive автоматически введет информацию в полях Server (Сервер), Project Username (Имя пользователя для проекта) и Port (Порт). Если IP-адрес сервера неправильный, щелкните по стрелке ⇓ справа от поля ввода и выберите в списке (или введите вручную) имя компьютера, на котором установлено приложение Version Cue. Вы сможете найти IP-адрес на экране загрузки страницы Advanced Administration (см. примечание «Загрузка страницы Advanced Administration»). Убедитесь в том, что вы правильно ввели имя пользователя.
Если вам не нужен безопасный доступ к функциям управления Version Cue, вы можете оставить установки по умолчанию. Если вы хотите обеспечить безопасность, измените настройки по умолчанию в разделе Users (Пользователи) после входа в систему. Обязательно запомните новое имя пользователя и пароль перед тем, как входить в систему. См. Совет 235.
5. При необходимости измените название проекта. Также вы можете нажать кнопку Browse, чтобы выбрать другой проект и сохранить в него сайт.
СОВЕТ 227: Создание проекта Version Cue
12_GoLive_T&T_(317-334)_rus.indd 321
02.02.2006 1:42:05
322 Добавление пользователей в проект Если вы хотите открыть доступ к проекту для других пользователей, убедитесь в том, что они могут видеть ваш экран Version Cue. Необходимая настройка находится в ниспадающем списке рядом с опцией Workspace Access (Доступ к рабочему столу) в параметрах приложения Version Cue.
6. Выберите опцию Show Detailed Synchronization Report (Показывать подробный отчет по синхронизации) и нажмите кнопку OK. Если вы помещаете сайт в существующий проект, далее откроется экран синхронизации. Если вы создаете новый проект, появится диалоговое окно с сообщением о том, что проект не существует. В этом диалоговом окне вас спросят, хотите ли вы создать новый проект. Выберите опцию Yes (Да), чтобы открыть экран синхронизации (рис. 227.4).
Чтобы добавить в проект новых пользователей (или, наоборот, закрыть им доступ), зайдите в меню Advanced Administration и перейдите в раздел Users. Вы сможете добавлять и удалять пользователей, а также настраивать параметры их доступа, включая проекты, с которыми они могут работать, и функции администрирования.
Рис. 227.4. Чтобы конвертировать существующий сайт в сайт Version Cue, включите опцию Version Control в разделе Site Settings. Вы увидите все файлы, которые будут загружены на сервер Version Cue. При желании вы сможете внести любые изменения
7. Чтобы завершить процесс, нажмите кнопку OK. Файлы будут загружены в проект, и вы увидите отчет о результатах. Совет Во время конвертирования устаревших сайтов GoLive в сайты Version Cue вы можете увидеть предупреждающее сообщение с информацией о том, что структуру сайта необходимо изменить. Закройте диалоговое окно, откройте сайт и выберите пункты меню Site Convert Site to New Structure (Изменить структуру сайта) перед тем, как выполнить действия, описанные здесь.
Чтобы создать новый сайт Version Cue, выполните действия, описанные в Совете 14. Когда вы увидите экран Version Cue, вернитесь к пункту 1 данного раздела.
ГЛАВА 5
12_GoLive_T&T_(317-334)_rus.indd 322
Работа с каскадными таблицами стилей
02.02.2006 1:42:05
323 СОВЕТ
228
Активация сайта Version Cue
Чтобы начать работу с сайтом Version Cue, сначала вы должны активировать сайт с вашего локального компьютера. Это значит, что на вашем компьютере будет создана работающая версия сайта (причем независимо от того, находится ли сайт в проекте на вашем компьютере или в проекте на сервере Version Cue в сети). Активировать сайт Version Cue очень легко. Выберите в меню File пункт Connect to Version Cue (Подключиться к Version Cue), как показано на рис. 228.1.
Рис. 228.1. Чтобы активировать сайт Version Cue, выберите в меню File пункт Connect to Version Cue
Всегда есть другой способ Также для активации сайта Version Cue вы можете воспользоваться диалоговым окном File New. Выберите категорию Site слева, опцию Connect to Site на панели в центре или опцию Version Cue в ниспадающем списке. Введите название или IP-адрес сервера и нажмите кнопку Browse, чтобы выбрать проект.
Откроется окно со списком проектов, к которым вы имеете доступ. Выберите проект с нужным сайтом и нажмите кнопку OK, либо дважды щелкните по названию проекта в списке (рис. 228.2).
Рис. 228.2. Дважды щелкните по названию проекта, содержащего сайт Version Cue, который вы хотите активировать с вашего компьютера
Возможно, вы увидите диалоговое окно с запросом о синхронизации сайта. Вы можете нажать кнопку OK, чтобы синхронизировать сайт, или кнопку Cancel, чтобы активировать сайт без синхронизации. За дополнительной информацией о синхронизации обратитесь к Совету 233.
СОВЕТ 228: Активация сайта Version Cue
12_GoLive_T&T_(317-334)_rus.indd 323
02.02.2006 1:42:05
324 СОВЕТ
229
Сохранение версии страницы
Вы можете открыть на сайте Version Cue файл так же, как и любой другой файл. Дважды щелкните по файлу на вкладке Files или Extras, чтобы открыть страницу. Также вы можете дважды щелкнуть по файлу из окна Version Cue в программе Adobe Bridge. Если ни один другой пользователь не работает с данным документом, в строке заголовка появится сообщение Available. В строке заголовка вы также можете увидеть сообщение In Use by Someone, которое обозначает, что определенный пользователь работает с файлом. Иконка состояния Version Cue в нижней части окна документа показывает, кто именно использует данный документ (рис. 229.1). Рис. 229.1. Вы можете увидеть статус файла Version Cue в левой нижней части окна документа. Состояние отображается в виде экранной подсказки
Когда вы только начинаете работу с документом, вас спросят, хотите ли вы пометить файл как занятый. При работе в сети советуем ответить Yes (Да). Если вы попробуете внести изменения в страницу, с которой работает другой пользователь, вы увидите предупреждающее сообщение (рис. 229.2).
Рис. 229.2. Если файл одновременно редактируют несколько пользователей, это может вызвать конфликт. Программа GoLive предупредит об этом
ГЛАВА 5
12_GoLive_T&T_(317-334)_rus.indd 324
Работа с каскадными таблицами стилей
02.02.2006 1:42:05
325
Вы можете внести в документ любое количество изменений и сохранять его столько раз, сколько считаете нужным. Это не повлияет на версию файла в Version Cue. Причина заключается в том, что вы редактируете рабочую копию файла, то есть локальный документ на вашем компьютере. Если вы хотите, чтобы внесенные вами изменения повлияли на копию файла, которая управляется приложением Version Cue, необходимо сохранить версию документа. Для этого нажмите кнопку Save a Version (Сохранить версию) на панели инструментов Version Cue (рис. 229.3). Также вы можете воспользоваться командой Site Version Control System Save a Version, либо выполнить Ctrl+щелчок (Mac) или щелчок правой кнопкой мыши (Windows) на файле в списке Рис. 229.3. Для создания новой версии файла воспользуйтесь кнопкой Save a Version
Files и выбрать пункт Save a Version. Когда появится диалоговое окно Save a Version, вы сможете добавить примечание. Примечания добавлять необязательно, однако они способны помочь вашим коллегам понять, какие именно изменения вы вносите в общий проект. Нажмите кнопку OK, чтобы сохранить новую версию проекта в окне Version Cue (рис. 229.4). Чтобы просмотреть версии документа, выделите его в списке файлов и нажмите кнопку Versions (Версии) на панели инструментов.
Панель инструментов Version Control Панель инструментов программы GoLive состоит из четырех частей. Одна из этих частей (или вложенных панелей) предназначена исключительно для функции Version Control; при желании вы можете разблокировать данную панель и сделать ее плавающей. Используя эту панель инструментов, вы можете пометить один или несколько файлов с помощью метки In Use, синхронизировать локальные файлы в Version Cue, отследить деятельность других пользователей и так далее.
Рис. 229.4. Вы можете добавлять примечания при сохранении каждой новой версии документа. Вы можете просмотреть примечания в окне Version Cue программы Adobe Bridge, а также в списке Versions программы Golive
СОВЕТ 229: Сохранение версии страницы
12_GoLive_T&T_(317-334)_rus.indd 325
02.02.2006 1:42:06
326 СОВЕТ
230 Что такое альтернативы? В подменю Version Control System имеется пункт Alternates (Альтернативы). Что такое альтернатива и когда вы должны ее использовать? Допустим, что вы работаете с черновой версией сайта и создаете несколько пробных страниц. Приложение Version Cue позволяет настроить эти страницы как альтернативы друг другу. Чтобы создать альтернативу , выберите не менее двух документов в окне Site и выполните команду Site Version Control System Alternates Make Alternate (Создать альтернативу). Одна из альтернатив всегда будет первичной. Вы можете изменить эту настройку в меню Site Version Control System Alternates Make Primary Alternate (Создать первичную альтернативу).
Восстановление предыдущей версии страницы
Если вы обнаружили, что необходимо восстановить предыдущую версию страницы Version Cue, выполните следующие действия: 1. Выделите страницу в списке Files окна Site. 2. Нажмите кнопку Versions на панели инструментов или выполните команду Site Version Control Systems Versions (Версии). 3. В открывшемся окне Versions выберите нужную версию в списке. 4. Нажмите кнопку Promote to Current Version (Сделать версию текущей). 5. Нажмите кнопку Done (Завершить). Откроется новая версия страницы, а диалоговое окно Versions будет закрыто (рис. 230.1). Если вы изменяете статус предыдущей версии на текущий, создается новая версия страницы с номером.
В столбце Alternates окна Site для обозначения альтернатив и первичприных альтернатив меняются уникальные символы.
Рис. 230.1. Нажмите кнопку Versions на панели инструментов, чтобы открыть список версий для активного документа. Вы можете изменить статус предыдущей версии на текущий
ГЛАВА 5
12_GoLive_T&T_(317-334)_rus.indd 326
Работа с каскадными таблицами стилей
02.02.2006 1:42:06
327 СОВЕТ
231
Сравнение двух различных версий
Вы можете сравнить две версии документа, чтобы найти все различия между ними. Выполните следующие действия: 1. Выделите страницу в списке Files окна Site. 2. Нажмите кнопку Versions на панели инструментов Version Control или выполните команду Site Version Control Systems Versions. 3. В открывшемся окне Versions выберите две версии для сравнения и нажмите кнопку Compare Selected Versions (Сравнить выбранные версии), как показано на рис. 231.1.
Так много различий IЕсли существует большое количество различий между версиями документа, вы можете воспользоваться кнопками Previous Difference (Предыдущее различие) и Next Difference (Следующее различие) в диалоговом окне Compare Versions, чтобы изучить каждое различие по отдельности.
Рис. 231.1. Выберите две версии в списке и нажмите кнопку Compare Selected Versions
Откроется окно с исходной кодировкой для двух документов. Если вы хотите видеть только различающиеся биты, добавьте галочку в поле Hide Identical Lines (Скрыть совпадающие строки). Если вы активируете опцию Synchronized Scrolling On (Синхронизировать прокрутку), обе страницы будут прокручиваться одновременно (рис. 231.2).
Рис. 231.2. В диалоговом окне Compare Versions отображается кодировка для двух версий документа
СОВЕТ 231: Сравнение двух различных версий
12_GoLive_T&T_(317-334)_rus.indd 327
02.02.2006 1:42:06
328 СОВЕТ
232
Использование функции управления ссылками в приложении Version Cue
Программа GoLive включает мощные опции для управления сайтами; эти опции будут доступны и во время работы с сайтом Version Cue. Тем не менее, вы должны четко знать, какие страницы помечены как In Use, и что произойдет, если вы уберете метку In Use. Если файл используется, вы увидите соответствующую иконку в столбце статуса Version Cue окна Site (рис. 232.1), а также в левом нижнем углу открытого окна документа.
Рис. 232.1. Если файл используется, вы увидите соответствующую иконку в столбце статуса Version Cue окна Site. Если вы не видите этот столбец, закройте правую панель окна Site и растяните границу окна
Если вы вносите в сайт изменения, которые влияют на ссылки (например, переименовываете файл или перемещаете его в другую папку ), вы увидите окно с запросом о том, хотите ли вы обновить ссылки. При работе с сайтом Version Cue вас также могут спросить, хотите ли вы пометить данные файлы как In Use. В некоторых случаях, программа GoLive автоматически пометит нужные файлы. Приведем ряд примеров.
Файлы автоматически помечаются как In Use, если • изменение названия данного файла влияет на страницу; • перемещение данного файла влияет на страницу; • удаление данного файла влияет на страницу; • изменение ссылок на данный файл влияет на страницу.
ГЛАВА 5
12_GoLive_T&T_(317-334)_rus.indd 328
Работа с каскадными таблицами стилей
02.02.2006 1:42:06
329
Важно! Следует помнить о том, что, если вы пометите файл как In Use, внесете в него изменения, а затем выберете команду Cancel Mark In Use на панели инструментов Version Control или в меню, все изменения будут утрачены. Файл будет восстановлен в начальном состоянии. Это произойдет даже в том случае, если вы внесли изменения в файл, сохранили и закрыли его (но не сохранили новую версию). Если вы выделите несколько использующихся файлов в окне Site и уберете для них метку In Use, это приведет к возникновению большого количества ошибок на сайте. Перед тем как удалять метку In Use, выполните команду Site Version Control System Save a Version for All (Сохранить версии для всех), как показано на рис. 232.2.
Рис. 232.2. Команда Save a Version for All позволяет сохранить новые версии всех страниц, с которыми вы работаете
Данная функция сохраняет все изменения в проект Version Cue и дает возможность ввести одно примечание для нескольких файлов.
СОВЕТ 232: Использование функции управления ссылками в приложении Version Cue
12_GoLive_T&T_(317-334)_rus.indd 329
02.02.2006 1:42:06
330 СОВЕТ
233 Ограниченная синхронизация Чтобы ограничить возможности изменения файлов во время синхронизации, отключите отдельные настройки (например, Uploads, Downloads или Deletions) в верхней части окна Synchronization.
Синхронизация файлов с помощью Version Cue
После обновления файлов на рабочей версии вашего сайта (копии сайта на локальном компьютере), а также после добавления или удаления файлов из проекта необходимо синхронизировать локальную версию и версию Version Cue. Чтобы начать процесс синхронизации, нажмите кнопку Synchronize на панели инструментов Version Control или выберите пункты меню Site Version Control System Synchronize All (Синхронизировать все), как показано на рис. 233.1. Рис. 233.1. Один щелчок мыши на панели инструментов начинает процесс синхронизации
Откроется окно Synchronize, в котором отобразятся файлы, помеченные для загрузки, отправки на сервер и удаления. Слева показаны локальные объекты на вашем компьютере, а справа – объекты в проекте Version Cue. Чтобы отобразить статус любого файла, щелкните по нему в списке и посмотрите на строку под панелями. Программа GoLive дает описание статуса файла на локальном компьютере (слева) и на сервере Version Cue (справа). См. рис. 233.2.
Рис. 233.2. Вы можете позволить программе GoLive синхронизировать файлы автоматически или изменить настройки по умолчанию, выбрав опции в ниспадающем меню окна Synchronize
Вы можете изменить путь загрузки для любого файла: щелкните по иконке между двумя панелями. Откроется список опций для управления файлами, который включает пункты Add To Server (Добавить на сервер) и Get Latest Version (Получить последнюю версию). Выберите нужную опцию для файла, с которым вы хотите работать.
ГЛАВА 5
12_GoLive_T&T_(317-334)_rus.indd 330
Работа с каскадными таблицами стилей
02.02.2006 1:42:07
331 СОВЕТ
234
Работа в режиме Offline и размещение сайта
Размещение сайта Version Cue на веб-сервере происходит так же, как и размещение любого другого сайта: вы подключаетесь к серверу в программе GoLive и выбираете команду Upload Modified, Upload All или Upload Selection (за дополнительной информацией обратитесь к главе 11). До размещения сайта вы должны синхронизировать рабочие копии файлов на вашем компьютере с файлами в проекте Version Cue (за информацией о синхронизации обратитесь к Совету 233). Это позволяет гарантировать, что в проекте Version Cue и на веб-сервере находятся последние версии сайта и всех файлов. Отметим, что вы можете отправить файлы на веб-сервер даже при работе в режиме Offline. Работа в режиме Offline подразумевает, что вы активировали сайт Version Cue, то есть скопировали сайт на ваш локальный компьютер, а затем отключились от сервера Version Cue. Локальный сайт представляет собой рабочую копию, которую вы можете редактировать и сохранять любым удобным способом. Завершив редактирование, вернитесь в программу Version Cue, чтобы синхронизировать вашу локальную копию и копию в Version Cue. Вы можете выполнить всю работу в режиме Offline, подключиться к серверу Version Cue для синхронизации, а потом снова перейти в режим Offline, чтобы разместить сайт на веб-сервере. Чтобы перейти в режим Offline, активируйте сайт Version Cue (см. Совет 228) и выполните команду Site Version Control Systems Work Off line (Работать в режиме Offline), как показано на рис. 234.1. Если на вашем компьютере имеются рабочие копии вашего сайта, вы можете также выбрать пункты меню File Open, чтобы открыть сайт и начать работу.
СОВЕТ 234: Работа в режиме Offline и размещение сайта
12_GoLive_T&T_(317-334)_rus.indd 331
02.02.2006 1:42:07
332 Размещение сайта из меню Advanced Administration Вы можете разместить сайт на веб-сервере из меню Advanced Administration. Чтобы это сделать, зайдите в меню Advanced Administration и щелкните по вкладке Projects (Проекты). Выберите поле флажка рядом с проектом, который вы хотите разместить, и нажмите кнопку Export (Экспорт). На следующем экране выберите название проекта и протокол. Введите информацию о сервере и повторно нажмите кнопку Export
Рис. 234.1. При работе в режиме Offline вы используете рабочую копию сайта, которая была загружена на ваш локальный компьютер из окна Version Cue. В режиме Offline вы можете редактировать, добавлять, удалять и даже размещать файлы; однако до размещения файлов вы должны синхронизировать их с проектом Version Cue
В режиме Offline в строке состояния Version Control в верхней части окна Site отображается сообщение Off line; количество опций в меню сокращается до одной. Эта опция используется для отмены команды Work Off line. Данное действие выполняется с помощью повторного выбора пунктов меню Site Version Control Systems Work Off line (рис. 234.2).
Рис. 234.2. В режиме Offline в строке состояния Version Control в верхней части окна Site отображается сообщение Offline; количество опций в меню сокращается до одной
ГЛАВА 5
12_GoLive_T&T_(317-334)_rus.indd 332
Работа с каскадными таблицами стилей
02.02.2006 1:42:07
333 СОВЕТ
235
Резервное копирование проектов Version Cue
Настоятельно рекомендуем настроить параметры резервного копирования для проектов Version Cue. Вы можете автоматически выполнять резервное копирование каждый день, неделю или месяц для отдельных проектов, либо вручную копировать все данные Version Cue. Для настройки параметров резервного копирования необходимо открыть меню Advanced Administration. Используя иконку Version Cue в строке меню Finder или на панели задач Windows, выберите меню Advanced Administration и зайдите в него. Выполните следующие действия, чтобы создать резервную копию проекта: 1. Выберите вкладку Projects, добавьте галочку в поле рядом с соответствующим проектом и нажмите кнопку Backup (Резервное копирование). См. рис. 235.1.
Рис. 235.1. Добавьте галочку в поле рядом с проектом, который вы хотите скопировать
2. Выберите опции для резервного копирования: Project File Versions (Версии файлов проекта), Project Metadata (Метаданные проекта) или Users/User Assignments (Настройки пользователя/пользователей). Опция Files выбрана по умолчанию (рис. 235.2).
СОВЕТ 235: Резервное копирование проектов Version Cue
12_GoLive_T&T_(317-334)_rus.indd 333
02.02.2006 1:42:07
334 Резервное копирование всех проектов Чтобы выполнить резервное копирование всех проектов в окне Version Cue, щелкните по вкладке Advanced в меню Advanced Administration и нажмите кнопку Back Up Version Cue Data (Резервное копирование данных Version Cue). На следующем экране вы сможете ввести название резервной копии. После этого нажмите кнопку Save, чтобы приступить к резервному копированию.
Рис. 235.2. Выберите опции для резервного копирования
Выберите следующие действия, чтобы настроить автоматическое резервное копирование: 1. Щелкните по вкладке Projects, чтобы вернуться на экран Projects. 2. Щелкните по названию проекта в списке. 3. Нажмите кнопку New в области Backup Configurations (Конфигурации резервного копирования) справа. См. рис. 235.3. 4. Выберите в ниспадающем меню Repeat (Повторять) пункт Daily (Ежедневно), Weekly (Еженедельно) или Monthly (Ежемесячно).
Рис. 235.3. Создайте конфигурацию для автоматического резервного копирования
5. Выберите другие опции в окне Schedule (График) и нажмите кнопку Save в верхнем левом углу. Чтобы удалить конфигурацию резервного копирования, добавьте галочку в поле рядом с ее названием и нажмите кнопку Delete. После резервного копирования вы увидите список проектов. Отсюда вы сможете восстановить резервную копию проекта: выберите ее в списке и нажмите кнопку Restore (Восстановить).
ГЛАВА 5
12_GoLive_T&T_(317-334)_rus.indd 334
Работа с каскадными таблицами стилей
02.02.2006 1:42:07
335
ГЛАВА 13
Действия и расширения, предлагаемые другими компаниями Для программы GoLive доступны сотни действий и расширений, которые предлагаются другими компаниями. Действия – это встроенные функции JavaScript, добавляющие элементы интерактивности на ваш веб-сайт. Используя действия, вы сможете существенно повысить функциональность вашего сайта, причем от вас не потребуется умение программировать или знание исходной кодировки. В качестве примеров подобных функций можно привести проверку ввода данных в полях формы и создание интерактивных слайд-шоу. Расширения отличаются от действий тем, что они добавляют новые функции (например, новые меню и палитры) в программу GoLive. Программа GoLive поставляется вместе с небольшим количеством встроенных расширений; вы найдете дополнительные расширения по адресу: http://share.studio. adobe.com. Большинство продвинутых пользователей Photoshop загружают в программу дополнительные обновления, которые обеспечивают поддержку новых функций. Действия и расширения GoLive повышают эффективность вашей работы и расширяют ваши возможности. В первом Совете данной главы мы расскажем о том, как устанавливать новые расширения. Затем мы поговорим о наших любимых действиях и расширениях, предлагаемых компаниями, которые являются давними и надежными партнерами Adobe.
336 СОВЕТ
236 Следите за новыми командами Большинство расширений добавляют новые команды в меню Special, Extensions или Window; за дополнительными сведениями обратитесь к руководству по расширению. Информацию по установке новых действий JavaScript вы найдете в Совете 186.
Установка расширений
Некоторые расширения включают свои программы установки, однако, по большей части, придется самостоятельно копировать расширения в папку GoLive. Для установки расширений выполните следующие действия: 1. Установите программу GoLive CS2, если вы еще этого не сделали. 2. Скопируйте папку для нового расширения, например, Smart Forms 2, в папку Adobe GoLive CS2:Modules:Extend Scripts (рис. 236.1). Если вы посмотрите в папку расширения, то заметите, что она содержит файл Main.html, а также другие файлы со скриптами или изображениями. Не нужно копировать файлы по отдельности, всегда устанавливайте папку расширения целиком.
Рис. 236.1. Скопируйте папку нового расширения в папку Extend Scripts и перезапустите программу GoLive
3. Перезапустите программу GoLive, чтобы активировать новое расширение. Вы можете проверить, было активировано новое расширение или нет. Для этого выполните команду Preferences Modules (Параметры Модули) и найдите название расширения в списке. Если в поле рядом с названием расширения нет галочки, добавьте ее и перезапустите программу GoLive. Чтобы временно отключить расширение, откройте параметры приложения, выберите опцию Modules слева и выделите нужное расширение в списке справа. Новая конфигурация станет активной после перезапуска программы GoLive.
ГЛАВА 13
Действия и расширения, предлагаемые другими компаниями
337 СОВЕТ
237
Создание ниспадающих меню DHTML
Название: MenuMachine. Разработчик: Big Bang Software. Источник: www.menumachine.com. Стоимость: см. сайт. Популярное расширение MenuMachine 2 создает ниспадающие меню DHTML. Исходная кодировка MenuMachine была улучшена. Теперь с помощью данного расширения вы можете создавать самую быструю и надежную систему меню DHTML, которую мы когда-либо видели.
Рис. 237.1. Расширение MenuMachine 2 использует знакомый интерфейс GoLive и встраивается в систему управления сайтами
Нам всегда нравилось расширение MenuMachine, а такие новые функции, как анимированные эффекты, настраиваемая непрозрачность и галерея стрелок и иконок делают его еще лучше. MenuMachine 2 предлагает улучшенную поддержку доступа, интеграцию с CSS и новые темы для меню; сейчас нам трудно даже представить, что когда-то нам приходилось обходиться без MenuMachine. Данное расширение содержит множество удобных функций, о которых мы не сможем здесь рассказать. Советуем самостоятельно изучить документацию, поставляющуюся в комплекте с MenuMachine 2.
СОВЕТ 237: Создание ниспадающих меню DHTML
338 СОВЕТ
238
Добавление корзины для покупок
Название: CatalogIntegrator Cart. Разработчик: CatalogIntegrator. Источник: www.catalogintegrator.com. Стоимость: бесплатно – 1.995 долларов США. Создавать Internet-магазины всегда было непросто. Установите расширение CatalogIntegrator Cart в программу GoLive, и на палитру Objects будет добавлена новая группа объектов, BuyObjects, которые вы сможете перемещать на страницы GoLive для создания магазина. После установки расширения перезапустите программу GoLive и нажмите кнопку BuyObjects на палитре Objects. Здесь не так много объектов, поэтому советуем нажать кнопку Toggle Orientation (Изменить ориентацию) в левом нижнем углу палитры Objects и расширить окно палитры (рис. 238.1).
Рис. 238.1. Так выглядит меню BuyObjects расширения CatalogIntegrator
Каждый объект в группе BuyObject является полноценным объектом HTML-формы. После добавления объекта на страницу воспользуйтесь палитрой Inspector, чтобы сконфигурировать такие поля, как SKU Number (Количество SKU), Product Name/Description (Название/описание проекта), Price (Цена), Size (Размер), Color (Цвет) и так далее. Базовое расширение CatalogIntegrator Cart является бесплатным и предлагается в двух версиях: для серверов Windows, а также для серверов Unix и Mac OS X. Не имеет значения, создаете вы сайт в среде Windows или Mac; для выбора версии важно только то, на каком сервере будет размещен сайт.
ГЛАВА 13
Действия и расширения, предлагаемые другими компаниями
339
После создания страниц для магазинной корзины необходимо загрузить их на сервер, чтобы получать заказы. Расширение CatalogIntegrator предлагает полный набор товаров, начиная от небольшого интерфейса PayPal и заканчивая сложной системой супермаркета. Теперь расширение CatalogIntegrator включает дополнительные обновления для импорта товаров и экспорта счетов. Эти обновления добавлены в версии Pro и Enterprise и включают стоимость доставки курьерскими службами FedEx, UPS и USPS.
СОВЕТ 238: Добавление корзины для покупок
340 СОВЕТ
239
Добавление элементов интерфейса PayPal
Название: PayPal eCommerce Extension. Разработчик: Transmit Media. Источник: www.transmitmedia.com/golive/paypal/. Стоимость: бесплатно. Расширение PayPal eCommerce Extension позволяет добавлять на ваш веб-сайт такие элементы, как кнопки оплаты и функции корзины для покупок. Посетители сайта смогут оплачивать товары кредитными картами, следовательно, вы сможете вести торговлю на сайте за безналичный расчет. Чтобы получать оплату, понадобится открыть счет PayPal (если его у вас пока нет). Вашим клиентам такой счет не нужен; им достаточно иметь кредитную карту. Все оплаты будут переводиться на ваш счет PayPal. Интерфейс PayPal поддерживает платежи в различных валютах, включая доллары США, канадские доллары, фунты стерлингов и японские йены. Расширение состоит из четырех новых объектов, которые добавляются на палитру Objects. Если вы перемещаете любой из этих объектов на страницу, открывается окно мастера (рис. 239.1), в котором задается ряд вопросов. После этого программа автоматически записывает нужную кодировку PayPal.
Рис. 239.1. Добавьте на страницу один из четырех объектов PayPal, и мастер соберет всю необходимую информацию
ГЛАВА 13
Действия и расширения, предлагаемые другими компаниями
341
На палитре имеются следующие объекты: • Buy Now (Купить). Добавляет кнопку PayPal, которая используется посетителями для совершения покупок по кредитной карте. Посетители перейдут на веб-сайт PayPal, где они смогут ввести информацию о кредитной карте. Оплата будет переведена на ваш счет PayPal; • Add to Cart (Добавить в корзину). Эта кнопка позволяет посетителям добавлять различные товары и услуги с вашего сайта в свои персональные корзины для покупок; • View Cart (Просмотреть корзину). Позволяет посетителям просмотреть корзину, не добавляя в нее новый товар; • Subscription (Подписка). Посетители могут оплачивать товары не сразу, а в кредит, например, в течение месяца или квартала.
СОВЕТ 239: Добавление корзины для покупок
342 СОВЕТ
240
Удаление ненужной кодировки
Название: DocCleaner. Разработчик: Оливье Мичалак (Olivier Michalak). Источник: http://golive.werk01.de/DocCleaner. Стоимость: 15 долларов США. Без этого расширения мы просто не смогли бы работать. Более того, если кто-нибудь попробует забрать у нас расширение DocCleaner, мы окажем серьезное сопротивление. Ни одна другая программа не может так же эффективно удалять из документов ненужные тэги шрифтов и отступы, вырезать из таблиц атрибуты ширины или высоты, а также удалять атрибуты тэгов или сами тэги (рис. 240.1).
Рис. 240.1. Расширение DocCleaner быстро и эффективно удаляет различные объекты
Если нужно очистить HTML-страницы от тэгов , чтобы использовать CSS-таблицы для стилизации текста, это расширение окажется бесценным помощником. Конвертирование нескольких документов отнимает много времени; используя расширение DocCleaner, вы решаете эту и многие другие задачи быстро и без проблем. Вы можете запускать DocCleaner на одной странице, на группе страниц или на всем сайте.
ГЛАВА 13
Действия и расширения, предлагаемые другими компаниями
СОВЕТ
241
Определяем совместимость с обновлением SWF
Название: Advanced SWF Authoring. Разработчик: GoLive Product Team. Источник: http://share.studio.adobe.com/axAssetDetailSubmit. asp?aID=8802. Стоимость: бесплатно. Команда разработчиков GoLive создала расширение, которое определяет, имеет ли посетитель вашего сайта обновление SWF, необходимое для отображения Flash-анимации. Это очень ценное расширение, так как оно поддерживает очень гибкую методику выявления наличия SWF-расширения, а также добавляет на страницы кодировку. После установки расширения и добавления на страницу SWFобъекта вы увидите на палитре Inspector новый раздел. Этот раздел, Detect (Определить), предлагает три методики: вы можете создать страницу, которая направит пользователя на Flash-страницу (если обновление установлено) или на другую страницу (если обновление не установлено). См. рис. 241.1. Вы можете указать, какое изображение в формате GIF или JPG должно заменить SWF-объект (если обновление не установлено). Наконец, вы можете указать, какая HTMLстраница должна заменить SWFобъект (если обновление не установлено). Во всех трех случаях вы выбираете методику в ниспадающем меню Type (Тип) на палитре Inspector и нажимаете кнопку Create Page (Создать страницу), чтобы создать новую страницу, либо кнопку Insert Detect (Вставить кодировку), чтобы добавить кодировку на текущую страницу. При использовании методики замены анимации на изображение во время тестирования мы увиРис. 241.1. Это расширение дели предупреждающее сообщение. добавляет на палитру SWF В соответствии с данным сообщеInspector новый раздел, Detect нием, необходимо ввести размеры изображения GIF или JPG (в пикселях) на палитре Inspector, так как расширение не может это сделать автоматически. Не волнуйтесь. Просто нажмите кнопку OK и введите ширину и высоту изображения на палитре Inspector. Вот и все!
СОВЕТ 241: Определяем совместимость с обновлением SWF
343
344 СОВЕТ
242
Просмотр компонентов Server Side Includes в редакторе Layout Editor
Название: Translate SSI. Разработчик: GoLive Product Team. Источник: папка GoLive SDK. Стоимость: бесплатно. Компоненты Server Side Includes (или SSI) схожи с компонентами GoLive в том, что вы добавляете часть одной страницы на другую страницу. Различие заключается в том, что компоненты GoLive используют технологию клиента, а компоненты SSI – технологию сервера. При обновлении компонента GoLive все связанные страницы должны быть загружены на веб-сервер. При обновлении компонента SSI достаточно загрузить саму страницу. Расширение Translate SSI позволяет просмотреть добавленную страницу (или виртуальный файл) в редакторе Layout Editor, что существенно упрощает настройку дизайна страницы. Вы найдете расширение в папку Adobe GoLive Adobe GoLive SDK Samples Translate SSI. Скопируйте всю папку и установите ее так, как показано в Совете 236. Выполните следующие действия, чтобы воспользоваться расширением: 1. Сначала создайте HTML-страницу, которую вы будете применять в качестве виртуального файла, и сохраните ее на вашем сайте. Не нужно добавлять тип документа или другую информацию, а также тэги . Используйте только ту HTML-кодировку, которая будет отображаться на другой странице. 2. Выберите в списке групп объектов на палитре Objects пункт Dynamic Script Tags. 3. Переместите SSI-объект
на страницу (рис. 242.1).
4. Выделите виртуальный файл с помощью инструмента Fetch URL.
ГЛАВА 13
Действия и расширения, предлагаемые другими компаниями
345
Рис. 242.1. Переместите SSI-объект на страницу и свяжите его с виртуальным файлом с помощью палитры Inspector
СОВЕТ 242: Просмотр компонентов Server Side Includes в редакторе Layout Editor
346 СОВЕТ
243
Добавление системы поиска
Название: Atomz Express Search. Разработчик: Atomz. Источник: http://www.atomz.com/golive/. Стоимость: бесплатно для сайтов объемом до 500 страниц. Расширение Atomz Express Search позволяет добавить на сайт функции поиска. Эта услуга предоставляется бесплатно для сайтов объемом до 500 страниц; если вы работаете с более крупным сайтом, свяжитесь напрямую с компанией Atomz. Используя расширение Atomz для программы GoLive, вы можете добавить на вашу веб-страницу форму Atomz Search. Расширение поддерживает несколько учетных записей Atomz Search, что позволяет администратору сайта управлять различными системами поиска из программы GoLive. Если у вас пока нет учетной записи Atomz, создайте ее по адресу: www.atomz.com. После установки расширения перезапустите программу GoLive. Затем выберите пункты меню Special Insert Atomz Search (Вставить систему поиска Atomz Search), чтобы добавить в текущий документ форму поиска. Также вы можете переместить объект Atomz Search из раздела Atomz палитры Objects в редакторе Layout Editor. Вас попросят ввести ваш адрес электронной почты, пароль и название сайта. Затем расширение запишет всю кодировку, которая необходима для поддержки полнофункциональной поисковой системы (рис. 243.1). Все очень просто.
Рис. 243.1. Вы сможете добавить на сайт поисковую систему Atomz с помощью мыши
ГЛАВА 13
Действия и расширения, предлагаемые другими компаниями
СОВЕТ
244
Автоматическое конвертирование гиперссылок
Название: URLize. Разработчик: GoLive Product Team. Источник: папка GoLive SDK. Стоимость: бесплатно. Конвертирование группы адресов электронной почты или URL-адресов веб-сайта в гиперссылки может оказаться трудной задачей. Страницы ссылок и папки пользователей представляют собой веб-страницы с большим количеством гиперссылок и адресов электронной почты. Конвертировать их придется долго, и в процессе вы можете допустить ошибку. Расширение URLize автоматизирует процесс создания гиперссылок; оно бесплатно поставляется вместе с программой GoLive. Если в папке GoLive у вас отсутствует вложенная папка Adobe GoLive SDK:Samples, вы можете загрузить последние версии расширений по адресу: http://partners.adobe.com/asn/golive/ download.jsp. Чтобы конвертировать ссылку, выделите адрес электронной почты или URL-адрес в редакторе Layout Editor и выполните команду Extensions URLize text Convert a selected URL or email text to a link (Конвертировать текст выбранного URLадреса или адреса электронной почты в ссылку). См. рис. 244.1. Программа GoLive мгновенно конвертирует выделенный текст (например, http://www.adobe.com) в ссылку.
Рис. 244.1. Для автоматического конвертирования гиперссылок воспользуйтесь одной из команд URLize
Также вы можете сразу конвертировать всю страницу. Если страница содержит несколько URL-адресов или адресов электронной почты, выполните команду Extensions URLize text Convert all URL and email text to links (Конвертировать текст всех URL-адресов и адресов электронной почты в ссылки). Сколько времени вы сэкономите!
СОВЕТ 244: Автоматическое конвертирование гиперссылок
347
348 СОВЕТ
245
Разработка сайтов данных с помощью OmniPilot Lasso
Название: Lasso Studio 8 for GoLive. Разработчик: OmniPilot Software, Inc. Источник: www.lassostudio.com. Стоимость: 199 долларов США. Расширение Lasso Studio позволяет веб-разработчикам создавать мощные веб-сайты данных в знакомом интерфейсе GoLive (рис. 245.1). Вы можете запускать Lasso Studio на любом сервере, работающем с расширением Lasso Professional 8 на любой платформе. Расширение Lasso Studio может подключаться к различным базам данных, включая FileMaker Pro, MySQL, Microsoft SQL Server 2000, Frontbase, Sybase, Openbase, PostgreSQL, Oracle и так далее.
Рис. 245.1. Расширение Lasso Studio добавляет новые объекты на палитру Objects, меню Lasso Studio, а также три новые палитры в меню Window
Далее мы перечислим некоторые новые функции, которые расширение Lasso Studio добавляет в программу GoLive: • отображение таблиц и полей баз данных в GoLive; • просмотр данных из базы в GoLive; • выделение цветом синтаксиса LDML-кодировки, включая тэги, ключевые слова, строки и выражения;
ГЛАВА 13
Действия и расширения, предлагаемые другими компаниями
349
• автоматическое завершение кодировки для всех LDMLтэгов; • быстрое создание веб-сайтов данных с помощью мастера Site Builder; • тэги Lasso отображаются в виде иконок. Это позволяет минимизировать визуальное искажение дизайна страницы; • мгновенное переключение между активными базами данных в меню Database Selector (Выбор базы данных); • система редактирования предлагает свыше 1000 тэгов Lasso; • упрощенное создание и редактирование программных выражений; • разрешение доступа к данным в базе для рабочей группы (прямой доступ к базе не требуется); • включает версию программного обеспечения сервера Lasso Professional 8 для разработки и тестирования.
СОВЕТ 245: Разработка сайтов данных с помощью OmniPilot Lasso
350 СОВЕТ
246
Добавление ссылки Tell a Friend (Расскажи другу)
Название: Tell a Friend. Разработчик: Rasmussens Design. Источник: www.rasmussens.dk/action. Стоимость: 10 долларов США. Пользователи программы GoLive постоянно спрашивают нас о том, как поместить на веб-страницы ссылки Tell a Friend. Действие Tell a Friend от компании Rasmussens Design решает эту задачу, причем без помощи скриптов сервера или сложных конфигураций, так как адрес электронной почты разбивается на биты, которые не воспринимаются программой распознавания. Вы можете выбрать одну из двух версий действия: текст или изображение. Программа запускает большинство клиентов электронной почты и автоматически добавляет заголовок окна в строку темы сообщения, а URL-адрес страницы – в тело сообщения. Пользователю остается только щелкнуть по тексту, ввести электронный адрес получателя и отправить сообщение. Также вы можете добавить текст до и после ссылки. Выполните следующие действия, чтобы добавить на страницу действие Tell a Friend: 1. Переместите действие в тело веб-страницы.
из раздела Smart палитры Objects
2. Выделив метку действия, выберите действие Tell a Friend или Tell a Friend Image в разделе Actions палитры Rollovers & Actions. 3. Настройте параметры действия на палитре Actions (рис. 246.1). Измените размеры палитры, чтобы видеть все доступные опции.
ГЛАВА 13
Действия и расширения, предлагаемые другими компаниями
351
Используйте действие снова и снова Сконфигурируйте действие и переместите его на вкладку Snippets палитры Library. Таким образом, вы сможете использовать данное действие на других страницах и сайтах.
Рис. 246.1. Поэкспериментируйте с настройками действия Tell a Friend. Проверьте результаты в веб-браузере
СОВЕТ 246: Добавление ссылки Tell a Friend
352 СОВЕТ
247
Создание интерактивных слайд-шоу
Название: SlideShowKit. Разработчик: Mind Palette. Источник: www.mindpalette.com/actions. Стоимость: 15 долларов США. Существует несколько способов создания слайд-шоу, однако они, в основном, требуют установки обновлений браузера, а это может усложнить ситуацию. Нэйт Болдуин (Nate Baldwin) из группы компаний Mind Palette записал большое количество интересных действий. Одно из наших любимых действий – это SlideShowKit. Это действие состоит из восьми различных действий, которые позволяют создавать впечатляющие эффекты слайд-шоу без использования обновлений браузера или других внешних редакторов (рис. 247.1).
Рис. 247.1. Это только один пример слайд-шоу, которое вы можете создать с помощью действий SlideShowKit
Действия SlideShowKit очень гибкие и могут быть настроены различными способами: • добавление на вашу страницу слайд-шоу с неограниченным количеством изображений (активация пользователями или автоматическая); • добавление кнопки Play/Pause, использующейся для управления слайд-шоу; • добавление ссылок на все изображения слайд-шоу. Ссылки открывают изображения на новой странице или в ниспадающем окне; • автоматическая генерация меню выбора формы, которое упрощает перемещение между страницами;
ГЛАВА 13
Действия и расширения, предлагаемые другими компаниями
353
• автоматическая генерация счетчика слайдов для шоу (1 из 20, 2 из 20 и так далее); • привязка текстового описания или титров, которые автоматически отображаются вместе с соответствующим изображением. Действия поставляются в комплекте с подробным руководством в формате PDF, которое описывает все опции. Кроме того, доступна демо-страница по адресу: www.mindpalette.com/actions/ natebaldwin/slideshow_kit/Examples. Если у вас есть вопросы о любых действиях Mind Palette, обратитесь на форум по адресу: www.mindpalette.com/forum.
СОВЕТ 247: Создание интерактивных слайд-шоу
354 СОВЕТ
248
Добавление на страницу области прокрутки
Название: ScrollArea 1.1. Разработчик: Ahgren’s Actions. Источник: www.golivecentral.com/pages/ahgren.shtml. Стоимость: бесплатно. Действие ScrollArea Майкла Агрена (Michael Ahgren) позволяет создавать на странице области прокрутки. Действие комбинирует слои GoLive, которые играют роль контейнера для прокрутки, с текстом или изображениями, активирующими эффекты прокрутки. Действие ScrollArea записывает кодировку JavaScript, которая поддерживает прокрутку. Нужно лишь использовать палитру Inspector программы GoLive, редактор CSS Editor и палитру Actions для настройки параметров прокрутки (рис. 248.1). Это просто. Поместите один слой на страницу-контейнер, а другой слой – на страницу прокрутки. Затем выделите текст или изображение, которое будет триггером, преобразуйте его в ссылку и добавьте действие ScrollArea. Если вы выберете событие Mouse Enter, прокрутка начнется в момент, когда пользователь поместит на ссылку курсор мыши. На палитре Actions введите названия слоев в ниспадающих меню и укажите направление прокрутки. На экране имеется поле ввода, в котором вы можете настроить скорость прокрутки, а также часть экрана для прокрутки (так называемый шаг прокрутки). Действие ScrollArea поставляется вместе с документацией в формате PDF, которая содержит сведения по Рис. 248.1. Настройте добавлению в слой текста и изобрапараметры области прокрутки жений, настройке параметров шага на палитре Rollovers & Actions и скорости, а также направления прокрутки.
ГЛАВА 13
Действия и расширения, предлагаемые другими компаниями
355 СОВЕТ
249
Проверка ввода данных в полях формы
Название: VerifyForm. Разработчик: Walter Blady’s Actions. Источник: www.actionscafe.com. Стоимость: 45 долларов США. Если ваш веб-сайт содержит формы, скорее всего, вам пришлось потратить много времени на исправление и форматирование отправленных данных. Вальтер Блейди (Walter Blady) из компании Actions Cafй разработал коммерческое действие, которое проверяет и переформатирует до пятнадцати выбранных полей в форме (рис. 249.1). Это позволяет добиться того, чтобы данные предоставлялись без ошибок и в нужном вам формате.
Рис. 249.1. Настройте действие VerifyForm на активацию с событием FormSubmit. Это позволит проверять данные перед отправкой
Настройте действие VerifyForm на активацию после нажатия кнопки Submit (Отправить) посетителем. Пользователь видит все ошибки, допущенные при вводе данных. Эти ошибки следует исправить перед отправкой формы. Также действие VerifyForm может блокировать пустые и повторяющиеся формы и другие неправильно введенные записи. В комплекте с действием поставляется подробная документация.
СОВЕТ 249: Проверка ввода данных в полях формы
356 Далее мы перечислим прочие преимущества действия VerifyForm: • проверка форм перед отправкой позволяет уменьшить нагрузку сервера; • новые функции для администраторов веб-сайтов, которые не имеют доступа к программам для работы с CGIформами; • мощные опции для проверки и форматирования полей формы; • проверка текстовых полей, переключателей, а также списков; • возможность отправки данных формы единой строкой, готовой к импорту в базу данных; • настройка сообщений об ошибках; • использование технологии cookie для повторного заполнения формы в случае, если пользователь заходит на страницу еще раз.
ГЛАВА 13
Действия и расширения, предлагаемые другими компаниями
357 СОВЕТ
250
Действия DJ Design
Название: 20 Actions Collection. Разработчик: DJ Design. Источник: http://actions.golivetutor.com. Стоимость: бесплатно. Дейв Джонс (Dave Jones) из компании DJ Design объединил все двадцать бесплатных действий в один файл в формате Zip, который вы можете быстро загрузить и использовать по своему усмотрению. Некоторые действия предлагают общие функции, например, поддержку печати страниц (рис. 250.1) и новых окон, а также достаточно сложные опции, связанные с переменными JavaScript и кодировкой.
Рис. 250.1. Использовать действие PrintPage удобно и просто
Вам пригодятся все двадцать действий. Далее мы расскажем о тех действиях, с которыми мы предпочитаем работать: • AutoFrameset и InfoFrameset. Используйте эти действия для конвертирования страницы в рамку. Это особенно полезно в случае, если страница связана с поисковой системой, так как движки поиска индексируют отдельные страницы, а не рамки; • PrintPage. Это действие печатает всю страницу, даже если она содержит кадры;
СОВЕТ 250: DJ Design Actions
358
• Current Date. Отображает на странице текущую дату. Вы даже можете настроить шрифт, размер и цвет даты или применить стиль CSS; • Open Window 1.2. Это действие основано на оригинальном действии Open Window программы GoLive; оно добавляет новое поле флажка, которое настраивает новое окно на полноэкранный режим. Кроме того, данное действие по умолчанию оставляет все поля флажка пустыми, так как большинство пользователей предпочитают работать в новых окнах.
ГЛАВА 13
Действия и расширения, предлагаемые другими компаниями
359
ПРИЛОЖЕНИЕ
Ресурсы GoLive в сети Internet Ресурсы Adobe Страница GoLive http://www.adobe.com/golive Советы по программе GoLive http://www.adobe.com/products/Советs/golive.html Adobe Studio Exchange http://share.studio.adobe.com/ Техническая поддержка Adobe GoLive http://www.adobe.com/support/products/golive.html
Советы и руководства GoLive Central http://www.golivecentral.com/ GoLive in 24 http://www.golivein24.com GoLive 911 http://www.futurastudios.com/golive911/ GoLive Basics http://www.golivebasics.com/ GoLive Tutor http://www.golivetutor.com/
360 GoLive After Hours http://www.afterhours.org.uk/ Руководства MindPalette
Списки и форумы Форумы пользователей Adobe http://www.adobeforums.com/ OmniPilot GoLive TalkList http://www.listsearch.com/GoLiveTalk.lasso?tab1=about GoLive Mod http://groups.yahoo.com/group/golivemod/
Действия и расширения Adobe Studio Exchange
http://share.studio.adobe.com/ Коллекция действий, расширений и модулей, поставляемых другими компаниями
http://www.actionext.com
ПРИЛОЖЕНИЕ
Ресурсы GoLive в сети Internet
Книги издательства «ДМК Пресс» можно заказать в торгово-издательском холдинге «АЛЬЯНС-КНИГА» наложенным платежом, выслав открытку или письмо по почтовому адресу: 123242, Москва, а/я 20 или по электронному адресу: [email protected]. При оформлении заказа следует указать адрес (полностью), по которому должны быть высланы книги; фамилию, имя и отчество получателя. Желательно также указать свой телефон и электронный адрес. Эти книги вы можете заказать и в Internet-магазине: www.dmk.ru, www.abook.ru. Оптовые закупки: тел. (095) 258-91-94, 258-91-95; электронный адрес [email protected].
Адам Пратт и Линн Гриллё
Создание Web-сайтов в Adobe® GoLive® CS2 250 лучших приемов и советов Главный редактор
