• Информация о сайте, контакты
• Интерфейс для типовых операций
• Каталог статей
• Видеоуроки
• Гостевая книга
• Обратная связь
• Ссылки

Новое на канале:

ЭКСПОРТ из InDesign в HTML

только нужной информации

(серия статей):

Экспорт из InDesign в html-4: работа с изображениями и гиперссылками

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

Независимо от того, каким способом представлены в макете графические элементы и что в данном случае вообще считается за изображение, при экспорте в html эти объекты должны быть заменены на их текстово-теговое представление и размещены в нужном фрагменте итогового html-документа. Рассмотрим три варианта решения задачи в зависимости от специфики вёрстки.

1. Рисунок внутри текста

Имеются ввиду, например, схемы, графики, сложные формулы и тому подобные элементы, созданные средствами самого InDesign-а.

В этом случае изображение сохраняется в отдельный файл любым удобным способом (вырезается из PDF-файла, "фотографируется" с экрана и т. д.) в нужном формате (*.png, *.jpg), а в самом тексте изображение заменяется на соответствующий текст вида:

<img src = "img/img01.png">

Простейший код, который поможет автоматизировать такую замену:

var pic_num = prompt("Номер рисунка:");
app.activeDocument.selection[0].contents = "<img src=\"img/img"+pic_num+".png\">";

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

Вторая строка обращается к выделенной области. Т. е. перед запуском скрипта нужно выделить объект, являющийся изображением, а точнее — выделить символ внутри текста, «точку вставки» изображения в текст. Выделенная область будет заменена на строку, которая генерируется во второй строке кода.

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

2. Связанные графические файлы, привязанные к тексту

В этом случае с помощью скрипта можно получить имя файла и скомпоновать заменяющую его нужную текстовую строку с учётом того, что файл уже пересохранён с нужным для html типом в нужной папке. Причём, если все изображения размещены в статье по одинаковому алгоритму (т. е. все они привязаны к тексту), то можно обработать их все сразу.

Установим курсор в материал и получим массив привязанных к нему объектов:

var obj = app.activeDocument.selection[0].parentStory.pageItems;
for (i = obj.length - 1; i >= 0; i--){
	var cur_image = obj[i].graphics[0];
	...

Сформируем имя файла, который будет использован в html, т. е. с тем же именем, но с другим типом файла и расположением:

	...
	var ris = cur_image.itemLink.name;
	ris = ris.slice(0,ris.lastIndexOf(".")) + ".png";
	ris = "\r<img src=\"img/" + ris + "\" width = \"200\" height = \"200\">\r";

Получили переменную, содержащую текст вида:

<img src = "img/curImage.png" width = "200" height = "200">

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

Замену изображения на полученную переменную выполним такой строкой:

	obj[i].parent.contents = ris;
	}

3. Графические файлы, не привязанные к тексту

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

var doc = app.activeDocument;
/*
	Определим страницы, на которых расположен выбранный материал,
	чтобы работать с графическими объектами только на этих страницах.
	Для этого получим текстовые фреймы материала
*/
var sel = doc.selection[0].parentStory.textContainers;
for (i = sel.length - 1; i >= 0; i--){
	var img = sel[i].parentPage.allGraphics;
	for (j = 0; j < img.length; j++){
		var ris = img[j].itemLink.name;
		ris = ris.slice(0,ris.lastIndexOf(".")) + ".png";
		ris = "\r<img src=\"img/" + ris + "\">\r\r";
		sel[i].paragraphs[0].insertionPoints[-1].contents = ris;
		}
	}

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

Работа с гиперссылками

Скрипт, который преобразовывает гиперссылки в html-код, приведу только с одним комментарием: расстановка текста гиперссылок выполняется сразу по всему документу, по всем материалам. Поэтому, выполнять её рекомендуется перед всеми остальными преобразованиями.

app.doScript(function(){
	var doc = app.activeDocument;
	var h = doc.hyperlinks;
	for (i = h.length-1; i >= 0; i--){
		var u = h[i].destination;
		var s = h[i].source;
		var uText = u.destinationURL;
		var sText = s.sourceText;
		sText.insertionPoints[-1].contents = "</a>";
		sText.insertionPoints[0].contents = ">";
		sText.insertionPoints[0].contents = SpecialCharacters.DOUBLE_STRAIGHT_QUOTE;
		sText.insertionPoints[0].contents = "_blank";
		sText.insertionPoints[0].contents = SpecialCharacters.DOUBLE_STRAIGHT_QUOTE;
		sText.insertionPoints[0].contents = " target = ";
		sText.insertionPoints[0].contents = SpecialCharacters.DOUBLE_STRAIGHT_QUOTE;
		sText.insertionPoints[0].contents = uText;
		sText.insertionPoints[0].contents = SpecialCharacters.DOUBLE_STRAIGHT_QUOTE;
		sText.insertionPoints[0].contents = "<a href = ";
		}
	app.findGrepPreferences = app.changeGrepPreferences = null;
	app.findGrepPreferences.findWhat = "</a>";
	app.changeGrepPreferences.appliedCharacterStyle = doc.characterStyles[0];
	doc.changeGrep();

	app.findGrepPreferences = app.changeGrepPreferences = null;
	app.findGrepPreferences.findWhat = "<a href.+?>";
	app.changeGrepPreferences.appliedCharacterStyle = doc.characterStyles[0];
	doc.changeGrep();
	},undefined,undefined,UndoModes.ENTIRE_SCRIPT);

Эта статья является заключительной в цикле статей об экспорте матералов из InDesign в html. В качестве заключения отмечу, что все показанные здесь скрипты и их фрагменты являются, скажем так, некоммерческим вариантом. Всю работу по экспорту в html можно ещё больше упростить, сделать все процессы ещё более удобными, сгрузить на программу ещё больше операций, о которых приходится помнить и выполнять вручную из раза в раз. Пределов здесь нет, пределы устанавливаем только мы себе сами, будучи уверенными в невозможности возможного. Но, если смысл всего здесь написанного вам понятен, значит, все эти пределы вы сможете сломать самостоятельно. Если же нет — всегда есть обратная связь, электронная почта и прочие средства связи, по которым можно обратиться к специалистам. Задавайте им вопросы, цените время своей жизни, не миритесь с рутинной работой, ищите способы от неё избавиться и переложить её на компьютер — не зря же ему дано столько ядер «под капотом»!:)

Комментариев нет.