Експорт вмісту до HTML | CS6 і CS5.5

Експортування в HTML — це простий спосіб отримати контент InDesign у формі, готовій для використання в Інтернеті. Під час експорту контенту в HTML можна контролювати експорт тексту та зображень. InDesign зберігає назви стилів абзаців, символів, об’єктів, таблиць і комірок, застосованих до експортованого вмісту, позначаючи контент HTML за допомогою класів стилів CSS із такою самою назвою. За допомогою Adobe Dreamweaver або будь-якого придатного для CSS редактора HTML можна швидко застосувати форматування та макет до вмісту.

InDesign експортує всі матеріали, зв’язану та вбудовану графіку, файли фільмів SWF, виноски, текстові змінні (як текст), марковані та нумеровані списки, внутрішні перехресні посилання, гіперпосилання, що переводять на текст чи веб-сторінки. Таблиці також експортуються, але певне форматування, таке як обведення таблиці і клітинок, не експортується. Таблицям призначаються унікальні ідентифікатори, отже у Dreamweaver на них буде можливо посилатися як на набори даних Spry. Поміщені аудіо- та відеофайли h.264 в HTML5 відокремлюються тегами <audio> та <video>.

InDesign не експортує об’єкти, які ви малюєте (як-от прямокутники, овали, багатокутники), гіперпосилання (за винятком зв'язків із веб-сторінками та застосованих до тексту зв'язків, що переходять до прив'язок тексту в тому самому документі), вставлені об'єкти (включно зі вставленими зображеннями Illustrator), перетворений на контури текст, теги XML, книги, закладки, гліфлети SING, переходи між сторінками, маркери індексів, об'єкти на монтажному столі, які не виділено і які не торкаються сторінки, елементи шаблонів сторінок (якщо це правило стосовно них не скасовується або якщо вони не виділяються перед експортом).

Створюється документ із вказаною назвою та розширенням .html (наприклад, «бюлетень.html»); якщо зазначено, у тому самому місці буде записана підтека зображень (наприклад, «бюлетень веб-зображення»).

У діалоговому вікні HTML вкажіть зазначені далі параметри.

Загальні параметри

Поле «Загальні» включає наведені нижче параметри.

визначає, чи експортуватимуться лише виділені елементи чи цілий документ. Якщо вибрано текстовий кадр, експортується весь матеріал разом з витісненим текстом.

Якщо виділено «Документ», експортуються всі елементи сторінок з усіх розворотів за винятком елементів сторінок-шаблонів, що не були замінені, та елементів сторінок на невидимих шарах. Теги XML і генеровані індекси й таблиці змісту також ігноруються.

Дає змогу визначати порядок розташування об’єктів сторінки.

На основі макета сторінки

Порядок читання визначається розташуванням елементів на сторінці.

Якщо вибрано «На основі макета сторінки», InDesign визначає порядок читання об’єктів на сторінці, виконуючи сканування зліва направо та зверху вниз. У деяких випадках, особливо в складних документах з багатьма шпальтами, елементи оформлення можуть не показуватися в потрібному порядку читання. Використовуйте Dreamweaver для перевпорядкування та форматування вмісту.

(Лише в азіатських версіях) Якщо вибрано «На основі макета сторінки», InDesign визначає порядок читання об’єктів на сторінці залежно від напрямку корінця документа (зліва направо або справа наліво). У деяких випадках, особливо в складних документах із багатьма шпальтами, експортовані елементи оформлення можуть не показуватися в потрібному порядку читання. Використовуйте Dreamweaver для перевпорядкування та форматування вмісту.

Однаково із XML-структурою

Якщо вибрано «Скопіювати структуру XML», з панелі структури XML виконується керування впорядкуванням експортованого вмісту та тим, який саме вміст експортується. Якщо вміст уже містить теги, можна просто перетягнути теги на панель структури XML, установивши порядок експорту XHTML. Якщо вміст не містить тегів, у меню панелі структури можна вибрати «Додати елементи без тегів», щоб генерувати теги, порядок яких можна змінити. Якщо включати елемент в експорт не потрібно, можна просто видалити тег за допомогою панелі структури XML. (Коли видаляється тег, вміст із файлу INDD не видаляється.) Див. Теговані елементи сторінок.

Як на панелі «Статті»

Порядок читання визначається порядком елементів на панелі «Статті». Експортуються лише позначені статті. Див. Включення статей для експорту.

Вкажіть просте поле в довгих тире або пікселях. Вказання полів у довгих тире забезпечує відповідність відображення на різних екранах До всіх полів застосовується однакове значення: до верхнього, нижнього, лівого та правого.

Виберіть «Перетворити на невпорядкований список», щоб перетворити абзаци з маркерами на елементи списку, сформатований в HTML, використовуючи тег <ul>. Виберіть «Перетворити на текст», щоб застосувати формат за допомогою тегу <p>, із символами маркерів у вигляді тексту. Якщо використано вихідні автоматичні маркери InDesign, маркери нижчого рівня також буде включено.

Цей пункт визначає, як перетворюються числа в HTML-файлі. Якщо використано вихідну автоматичну нумерацію InDesign, маркери нижчого рівня також буде включено.

Перетворює нумеровані списки на елементи списку, відформатовані в HTML із використанням тегу <ol>.

Перетворює нумеровані списки на елементи списку, але додає атрибут <value> на основі поточного номера абзацу в InDesign.

Перетворює нумеровані списки на абзаци, що починаються з поточного номера абзацу як текст.

Запускає переглядач, якщо він є.

Параметри зображення

Укажіть, як потрібно експортувати зображення в HTML.

Експортує оригінальне зображення в підпапку «<document_name>-web-images». Коли цей параметр вибрано, всі інші параметри затемнені.

Дає вам змогу змінювати налаштування, щоб визначати, як експортуватиметься зображення.

Замість експорту зображень до підтеки цей параметр дає вам змогу ввести локальний URL (такий як «images/»), що з’являтиметься перед назвою файлу зображення. У коді HTML атрибут «link» показує шлях і розширення, що їх ви встановили. Цей параметри є зокрема ефективним, коли ви самі перетворюєте зображення на web-сумісні зображення.

Установіть позначку тут, щоб атрибути об’єкта зображення бралися з макета.

Вкажіть роздільну здатність зображень у пікселях на дюйм (ppi). У той час як операційні системи мають стандарт 72 ppi або 96 ppi, роздільна здатність мобільних пристроїв може варіюватися від 132 ppi (iPad) до 172 ppi (Sony Reader) та понад 300 ppi (iPhone 4). Можна вказати значення ppi для кожного вибраного об'єкта. Пропонуються такі значення: 72, 96, 150 (середнє значення для всіх сучасних пристроїв для читання електронних книг) та 300.

Вкажіть, чи розмір зображення має лишатися сталим, чи він має змінюватися відносно сторінки. Пункт «Відносно сторінки» встановлює відносне значення у відсотках, виходячи з розміру зображення відносно ширини сторінки InDesign. Якщо вибрати цей пункт, зображення пропорційно масштабуватиметься відносно ширини області читання.

Можливість налаштувати вирівнювання зображення ліворуч, по центру або праворуч, а також вказати інтервал перед зображенням та після нього.

Установіть позначку, щоб застосувати ці параметри до всіх прив’язаних об’єктів.

Дає змогу вибирати, чи мають оптимізовані зображення в документі перетворюватися на GIF, JPEG або PNG. Виберіть «Автоматично», щоб дозволити InDesign вирішувати, який формат використовувати в якому випадку. Якщо вибрати PNG, вимикаються параметри стиснення зображення.; використовуйте PNG для забезпечення відсутності втрат у зображеннях або для зображень із прозорими елементами.

Дає вам змогу керувати тим, як InDesign оброблятиме кольори, оптимізуючи GIF-файли. Формат GIF використовує обмежену палітру із щонайбільше 256 кольорів.

Виберіть «Адаптивне», щоб створити палітру з використанням типових зразків кольорів у графіці без жодного змішування (змішування малих ділянок кольорів для імітування додаткових кольорів). Виберіть «Web», щоб створити палітру безпечних кольорів для Інтернету, яка є підмножиною системних кольорів Windows і Mac OS. Виберіть «Системна (Win)» або «Системна (Mac)», щоб створити палітру, використовуючи вбудовану системну палітру. Цей вибір може мати неочікувані наслідки.

Виберіть «Чергувати», щоб прогресивно завантажувати зображення шляхом заповнення відсутніх рядків. Якщо цей параметр не вибрано, зображення має вигляд розмитого і поступово набуває чіткості, досягаючи повної роздільної здатності.

Встановлює компроміс між стисненням (для меншого розміру файлу) і якістю зображення для кожного створеного зображення JPEG. «Низька» дає найменший файл і найнижчу якість зображення.

Визначає, наскільки швидко має показуватися графіка JPEG, коли файл, що містить зображення, відкривається в Інтернеті. Виберіть «Прогресивний», щоб зображення JPEG показувалися поступово і дедалі детальніше по мірі завантаження. (Файли, створені з цим параметром, значно більші і потребують більше оперативної пам’яті для перегляду.) Виберіть «Базова лінія», щоб кожен JPEG-файл показувався лише після цілковитого завантаження, а на його місці до показу знаходився заповнювач.

Параметри експорту об’єкта, застосовані до окремих зображень, ігноруватимуться. Див. Застосування параметрів експорту об'єкта.

Додаткові параметри

Використовуйте розділ «Додаткові», щоб встановити параметри CSS і JavaScript.

Каскадні таблиці стилів (CSS) — це набори правил форматування, що керують виглядом вмісту на веб-сторінці. Коли використовується CSS для форматування сторінки, вміст відділяється від представлення. Вміст вашої сторінки, код HTML, знаходиться в самому HTML-файлі, тоді як правила CSS, що визначають представлення коду, містяться в іншому файлі (зовнішній таблиці стилів) або всередині HTML-документа (зазвичай у розділі «Head»). Наприклад, ви можете задати інші кеглі для виділеного тексту і можете використовувати CSS для керування форматом і розміщенням блочних елементів на веб-сторінці.

Експортуючи у XHTML, можна створити перелік CSS-стилів, що з’являється в розділі «Head» HTML-файлу з оголошеннями (атрибутами).

Якщо вибрано «Включити визначення стилів», InDesign здійснює спробу зіставити атрибути форматування тексту InDesign з еквівалентами CSS. Якщо вибір цього параметра скасовано, файл HTML міститиме пусті оголошення. Пізніше можна буде редагувати ці оголошення у Dreamweaver.

Якщо вибрано «Зберегти локальні зміни», буде додано локальне форматування, таке як курсив або напівжирний шрифт.

Якщо вибрати цей параметр, розділ CSS не буде включено у файл HTML.

Укажіть URL наявного аркуша стилю CSS, що зазвичай є відносним URL, наприклад /styles/style.css. InDesign не перевіряє, чи існує CSS, чи є вона дійсною, тому вам слід використовувати Dreamweaver, щоб підтверджувати ваше налаштування зовнішньої CSS.

CSS можна вказати за допомогою кнопки «Додати аркуш стилів».

Виберіть «Посилання на зовнішній JavaScript, щоб запускати якийсь JavaScript, коли відкривається сторінка HTML. Вкажіть URL сценарію JavaScript, що зазвичай є відносним URL. InDesign не перевіряє, чи існує цей сценарій і чи є він дійсним.

Розділи за темою

Створюйте й публікуйте електронні книги, брошури, листівки, поштові картки, постери, інтерактивні макети сторінок і багато чого іншого з Adobe InDesign.