или изменить размер поля (рис. 50.2).
Рис. 50.2. Выберите объект CSS на странице и отредактируйте его атрибуты, например, ID или размеры, в палитре Inspector
Используйте CSS Editor (Редактор CSS) для изменения стиля поля, например, настройки, границ, фонового цвета или изображения и так далее (рис. 50.3).
В GoLive CS на вкладке Layer палитры Inspector появились две новые кнопки: CSS Editor и Layer Palette. Один щелчок, и вы получаете доступ к инструментам, которые необходимы для работы со слоями.
Рис. 50.3. В CSS Editor можно настроить фоновый цвет или изображение поля
Ранее текст на 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 и так далее.
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 (По умолчанию) выравнивает таблицу по левому краю, но без обтекания;
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).
Управление таблицами в программе 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 (Отобразить невидимые объекты).
Рис. 62.2. Измените настройки видимости палитры View
СОВЕТ 62: Включаем и выключаем невидимые элементы
03_GoLive_T&T_(039-100)_rus.indd 85
17.01.2006 5:53:47
86 СОВЕТ
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, например, , и | |
