Александр ГЛУЩЕНКО

КАК ВСТАВИТЬ ИЛЛЮСТРАЦИЮ В ПРОИЗВЕДЕНИЕ

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

      Во-первых, полагаю, что Вы редактируете свой текст в редакторе «Word». При этом Ваш файл записывается и сохраняется в формате обычного текста .txt, то есть имеет в качестве имени что-то типа roman.txt.

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

      В-третьих, у Вас есть программа-«смотрелка» графических изображений.

      У меня, помимо «Word», в такой «джентльменский набор» входят графические редакторы «Corel Paint» и «Paint» (из стандартного комплекта «Windows») и популярная «смотрелка» «ACDSee». В принципе, если бы мне ничего не надо было бы подправлять и ретушировать в размещаемых иллюстрациях, я мог бы вполне отказаться и от графических редакторов, поскольку «ACDSee» прекрасно справляется с функцией изменения размеров.

      И наконец, необязательное, но очень полезное для работы условие: все материалы, включая текст и графические файлы должны находиться в общей отдельной папке, которую, опять-таки удобства для, можно назвать также как и всё Ваше произведение — например Roman. Это позволит избежать указания длинных путей к файлу и неизбежной корректировки этих путей при размещении материалов в «Самиздате».

      Итак, определились. Переходим к делу.

      Предположим, в текст этой статьи я хотел бы вставить некую фотографию, сделанную в Магаданском краеведческом музее. Фотография уже сделана и «перекачана» в компьютер с именем DSC01229.JPG. Её исходные размеры 1600 х 2400 пикселей, а объём — 623 Кб, что совершенно «неподъёмно» для самиздатовской публикации.

Шаг первый. Изменяем параметры иллюстрации.

      Как я уже писал в «Самоучителе», на открываемых интернетовских страничках размеры иллюстраций, как правило, не превышают 400 пикселей на сторону, а объём их в идеале не должен превышать 100 Кб (лучше — нескольких десятков килобайт). Не беспокойтесь: если понадобится, Вы всегда сможете предоставить читателю полноразмерный (или уменьшенный до разумных пределов) вариант картинки.

      При помощи графического редактора или — в моём случае — «ACDSee» уменьшаем максимальный размер снимка до необходимых нам 400 пикселей. Получившийся новый файл с именем DSC01229_изменить размер.jpg переименуем (снова для удобства!) по имени произведения: roman-01.jpg. Цифирки «01» сами по себе ничего не означают, но количество иллюстраций на Вашей странице (в том числе и с учётом будущих дополнений) может быть больше единицы, поэтому удобнее различать файлы иллюстраций по номерам.

      Исходный файл (большого размера) пока не удаляем. Он нам ещё может понадобиться.

      Как Вы, наверное, заметили, при произведённом уменьшении размера фотографии уменьшился до 34 Кб (почти в 20 раз!) и объём графического файла.

      Картинка готова к размещению.

Шаг второй. Прописываем картинку в тексте произведения.

      Как Вы помните, картинка «прописывается» при помощи тэга <img>. Однако, самый простой вариант непосредственного использования этого тэга не позволяет нам выравнять картинку желаемым образом и поставить под ней приличествующую нашему произведению подпись. Поэтому чуть-чуть усложним конструкцию и вставим картинку в ячейку таблицы. И выглядеть это будет так (число в скобках в начале каждой строки условно обозначает её номер и в исходном тексте, естественно не указывается):

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

      Смотрим.

      Строка 01 — завершение предшествующего текста, ниже которого мы и вставляем иллюстрацию.

      Строки 02, 04, 06, 18, 20 — пробельные. Советую не пренебрегать: если Вы собираетесь возвращаться к своему тексту, а делать это, скорее всего, придётся ещё не раз, пробельные строки помогут Вам быстрее сориентироваться в ранее написанном.

      Строка 03 — тэг конца абзаца. С его помощью иллюстрация и следующий за иллюстрацией текст будут отделены от текста предшествующего, выравняв их по одной линии.

      Строки 05 и 19 — комментарии, которые никак не отразятся при просмотре произведения. Ставить комментарии или нет — воля Ваша, однако я не советовал бы отказываться от них, минимум, по двум причинам: во-первых, комментарии помогают разобраться в сути исходного текста, над которым мы с Вами сейчас работаем; а во-вторых, найти в большом текстовом массиве нужный фрагмент зачастую представляется достаточно сложным. Куда как проще набрать в поисковой строке «Word» сочетание «Картинка-1», и через долю секунды Вы окажетесь в нужном месте.

      Здесь я изменю порядок изложения и сразу перейду к строке 11, а к седьмой строке мы вернёмся чуть позже.

      Строка 11 — собственно картинка, «прописанная» при помощи тэга <img>. Рассмотрим его параметры.

      src=roman-01.jpg — здесь указано имя нашего графического файла с картинкой. В общем случае, помимо имени файла должен быть указан и путь к нему. Но мы уже собираем бонусы за наши прежние труды: поскольку файл с картинкой находится в той же папке, что и подготавливаемый нами исполнительный файл .html, а в «Самиздате» наши картинки будут храниться вместе с произведением, путь к файлу можно не указывать, что гарантирует отсутствие лишней мороки и путаницы.

      border="1" — здесь, как говорится, возможны варианты. Указав в качестве значения параметра ненулевую величину, мы окружим рисунок рамочкой соответствующей толщины (как правило, указывают не более 1). Если же по эстетическим соображениям рамка не нужна, необходимо параметру задать значение 0.

      width="266" height="400" — соответственно, ширина и высота изображения в файле (в пикселях). Вот зачем нам понадобилась программа-«смотрелка» (хотя при желании это можно было бы узнать и у «Проводника»). В принципе, можно было бы ограничиться и одним размером — другой будет вычислен автоматически, но зачем излишне нагружать «самиздатовский» сервер?! А нам не сложно, правда?

      Перепрыгнем на строку 09. Здесь описана невидимая при просмотре таблица, в одну из ячеек которой мы вставим нашу картинку. Зачем? — узнаем чуть позже. А пока про указанные параметры: ширина таблицы (или ячейки, если угодно) — width="266" — в точности равна ширине нашей картинки;

      align="left" — выравниваем нашу таблицу по левому краю другой таблицы — «вмещающей», потом скажу, зачем;

      cellpadding="0" — отступ от границ таблицы до помещённой в неё картинки равен нулю, то есть наша картинка плотно облегается со всех сторон границами вмещающей её ячейки;

      border="0" — в таблице рамка, явно разграничивающая ячейки, нам совсем не нужна. Указываем её толщину равной нулю.

      Разобрались? Едем дальше...

      Строки 10 и 12 — соответственно начало и конец верхней табличной строки (<tr>, </tr>) с единственной её ячейкой (<td>, </td>), в которую мы вставили картинку.

      Возвращаемся к строке 07. Здесь идёт описание внешней, «вмещающей» таблицы. Она выравнена по левому краю текста (align="left"). То есть, по самому его краю. В сочетании с отсутствием отступов внутри ячеек (cellpadding="0") и вышеуказаным в строке 09 выравниваем по левому же краю «вложенной» таблицы в результате мы получаем то, что и вся картинка левой своей стороной будет прижата к левой границе текста, что и требовалось получить! Соответственно, если в описаниях обеих таблиц указать align="right", то рисунок окажется выравненным по правому краю текста.

      «Ну и зачем было попу мочить?» — спросит въедливый читатель. — «Ведь рисунок можно было бы прижать к краю текста без всяких таблиц, просто указав нужное значение параметра align в тэге изображения <img>...» Безусловно, можно! Но в таком случае и текст, обтекающий нашу картинку с той или иной стороны (в зависимости от выравнивания), «приклеился» бы к ней самым непосредственным образом, что, согласитесь, было бы не очень красиво.

      Мы же эту проблему решили за счёт параметра ширины таблицы width="326" в строке 07, который на 60 пикселей больше, чем аналогичный параметр у вложенной таблицы (строка 09). Соответственно, теперь обтекающий «вмещающую» таблицу текст будет отдалён от той или иной боковой границы рисунка ровно на указанные 60 пикселей.

      Таким образом картинка красиво и органично вписалась в текст. Теперь остановка за подписью.

      Как мы видим, строка 13 открывает во «вложенной» таблице новую строку, а в ней — ячейку, с выравниванием вложенного текста по левому краю, независимо от того справа или слева в основном тексте расположена наша картинка. Гарантированный «зазор» в 60 пикселей не позволит тексту подписи «прилипнуть» к основному.

      Строка 14. Первые два тэга <p> и <br> «отрывают» текст подписи от картинки. Далее идёт описание шрифта: шрифт наклонный (<i>), полужирного начертания (<b>), размер его на 1 величину меньше размера шрифта основного текста (<font size="-1">).

      Строка 15 — собственно текст подписи произвольной длины. Он пишется по тем же правилам, что и основной текст. В частности, при необходимости из него можно делать сноски и прямые ссылки. А если в тексте подписи есть символы, которые при размещении произведения «Самиздат» не пропускает либо искажает, их можно заменять соответствующими HTML-кодами. Вот и в нашем примере «угловые» кавычки заменены их HTML-кодами &#171; и &#187; соответственно.

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

      Вам не нужна подпись под картинкой? Просто удалите из исходника строки с 12-й по 15-ю включительно.

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

      Строка 17 точно таким же образом закрывает ячейку, строку и «вмещающую» таблицу.

      Строка 21 продолжает основной текст. Обратите внимание на начинающее абзац трёхкратное повторение сочетания HTML-кода неразрывного пробела с пробелом обычным (&nbsp; ) — таким образом я формирую абзацный отступ в «красной» строке.

      Ну а теперь можно и посмотреть, что получилось в результате.

==================================

Начало примера

==================================

...такой снимок я сделал в Магаданском областном краеведческом музее.

Из «колымских гастролей» Г. С. Жжёнова. Экспозиция Магаданского областного краеведческого музея.

      Георгий Степанович Жжёнов с 1937 по 1945 годы находился в заключении на Колыме, где с 1945 по 1946 годы играл в Магаданском драматическом театре им. Горького...

==================================

Конец примера

==================================

      Давайте в том же исходном тексте всего лишь поменяем в строках 07 и 09 значения параметров align с "left" на "right". Что изменится?

==================================

Начало примера

==================================

...такой снимок я сделал в Магаданском областном краеведческом музее.

Из «колымских гастролей» Г. С. Жжёнова. Экспозиция Магаданского областного краеведческого музея.

      Георгий Степанович Жжёнов с 1937 по 1945 годы находился в заключении на Колыме, где с 1945 по 1946 годы играл в Магаданском драматическом театре им. Горького...

==================================

Конец примера

==================================

      Разумеется, для того, чтобы вставить второй вариант, я не переписывал весь исходник заново, а использовал простую функцию «копипаст» (от английских слов «copy» и «paste»), то есть выделил нужный участок текста при помощи мыши, нажал «аккорд» <Ctrl C> (записал выделенный фрагмент в буфер памяти), переместился на новое место и с помощью «аккорда» <Ctrl V> вставил фрагмент в текст, после чего подкорректировал изменяемые параметры. Вся операция — несколько секунд.

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

      А теперь усложним задачу. Как легко убедиться, исторические тексты на нашей картинке практически не читаются. Понятно: масштаб мелковат, а больше мы его, по определению, делать не должны. Выход, однако, есть. Мы разместим в «Самиздате» более крупную копию файла изображения, и желающие смогут её увидеть.

      Для начала давайте изготовим эту копию. Как показывает практика, для выявления достаточно мелких деталей достаточно иметь максимальный размер изображения в 1024 пикселя по одной из сторон. При помощи графического редактора или «смотрелки» описанным выше методом изменим размер того, исходного файла. В результате получим уменьшенное изображение размером 682 х 1024 пикселя и объёмом в 165 Кб (файл заметно «потяжелел» по сравнению с картинкой, размещённой нами в тексте. Соответственно увеличилось и время его открывания). Переименуем его в roman-01-b.jpg (буковка b будет условно означать «big» — большой. Прошу знатоков английского языка не придираться). А теперь возьмёмся за строку 11 из нашего исходника, оставляя всё остальное на своих местах.

      Новая версия строки будет выглядеть таким образом:

      Попробуем разобраться, что сие означает.

      Наличие тэга <a href ...> с длиным «хвостом» параметров (до самого тэга <img>) и коротенького закрывающего тэга </a> (в самом конце строки) свидетельствует о том, что мы имеем дело со ссылкой. Причём не просто ссылкой внутри нашего текста, а адресуемой на внешний файл. А здесь без указания конкретного адреса не обойтись никак.

      В конечной части адреса мы упираемся в имя того самого файла, который недавно создали. Но он-то, файл, находится пока в нашем компьютере, так куда же ведёт указанный адрес?

      Вы когда-нибудь обращали внимание на адресную строку браузера в момент просмотра собственных произведений, вникали в её структуру и смысл? Сразу за адресом сервера — samlib.ru (или zhurnal.ru) идёт адресация к Вашему произведению — через первую букву вашей фамилии (естественно, в латинице), Вашу фамилию и инициалы, соединённые вместо пробелов чертой подчёркивания — к HTML-файлу, названному так, как Вы указали его при размещении.

      Аналогичным образом Сеть адресуется и к картинкам, в Ваше произведение включённым. Причём, к тем картинком, которые включены в текст, как в приведённых выше примерах, непосредственно, машина найдёт дорогу и без дополнительных указаний, а вот если какие-то файлы расположены как бы «сами по себе», то надо знать и указывать в исходном тексте, где они находятся. В нашем случае здесь всё достаточно просто: между адресом сервера и «папкой», именованной первой буквой Вашей фамилии, появляется имя ещё одной «папочки» — /img, вместо имени HTML-файла появляется одноимённая с ним папка, в которой и хранится файл «отдельно лежащей» картинки.

      Так, допустим, если некий Фёдор Иванович Пупкин (pupkin_f_i) будет размещать в «Самиздате» произведение под названием «roman», то стопудово можно утверждать, что прилагаемая отдельным дополнением к роману картинка с именем roman-01-b.jpg будет храниться по адресу:
http://samlib.ru/img/p/pupkin_f_i/roman/roman-01-b.jpg
Вот этот адрес и надо указать первым параметром в тэге <a href ...>, не забыв при этом заключить адрес в пару «прямых», программистских кавычек ("...").

      Далее. Параметр target определяет, будет ли вызываемый файл открываться в новом окне (_blank) или заменит своим изображением читаемый текст в текущем окне (_self). Я предпочитаю открывать новое окно, но тут дело вкуса.

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

      Собственно, всё это мы и увидели в новом варианте строки 11. Дальше за указанным идёт знакомое нам уже описание тэга <img>, и завершает красоту закрывающий ссылку тэг </a>.

      Что оно делает? В целом, выглядит это так:

==================================

Начало примера

==================================

...такой снимок я сделал в Магаданском областном краеведческом музее.

Из «колымских гастролей» Г. С. Жжёнова. Экспозиция Магаданского областного краеведческого музея.

      Георгий Степанович Жжёнов с 1937 по 1945 годы находился в заключении на Колыме, где с 1945 по 1946 годы играл в Магаданском драматическом театре им. Горького...

==================================

Конец примера

==================================

      В общем-то, на нашей странице визуально ничего почти и не изменилось. Ну разве что вокруг картинки появилась синенькая рамочка, указывающая, что наша картинка — ссылка. Читатель, наведя указатель мыши на картинку, увидит, как стрелка изменит свой вид на перст указующий, и прочитает во всплывшей подсказке, что, щёлкнув перстом по картинке он получит изображение с во-от такими размерами и объёмом. И уже сам читатель будет определять, открывать ли ему новое изображение или поостеречься.

Шаг третий. Готовимся и размещаем иллюстрации в «Самиздате».

      Итак, теоретическую подготовку мы, в основном, прошли, пора переходить к практике.

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

      Всё готово к размещению.

Окно регистрации произведения при первичном размещении данной статьи. Статус доступа к книге на чтение «Скрытый».

      Далее действуйте по процедуре, подробно прописанной в «Самоучителе».

      Важно иметь ввиду два момента.

      Во-первых. Как и написание нового произведения, любые правки уже размещённого, вплоть до самых мелочных, до простановки запятых и вставки пропущенных букв, производите в своём исходном файле (напоминаю: формат файла — Обычный текст *.txt. Если что не поняли, читайте в «Самоучителе»!) и потом исключительно с помощью «копипаст» переносите его в «самиздатовское» окно. Привыкнуть к этой процедуре легко, но зато Вы избавите себя от многих головных болей.

      Во-вторых. До того момента, как Вы удостоверитесь в полном благополучии размещённого произведения (картинки открываются, особых глюков не видно и т. д.) придайте ему в «окне регистрации произведения» статус доступа к книге на чтение «Скрытый». Вам ведь не хочется, чтобы в раздел «Новинок» попал некий полуфабрикат с пустыми глазницами вместо картинок.

      После размещения текста (перекачки его на «Самиздат») проверьте его: на месте картинок увидите пустые прямоугольники с рамками или без оных и с подписями (если конечно они были предусмотрены).

Окно вставки и редактирования иллюстраций. Использовать кнопки «Обзор» и «Загрузить».

      Выйдите из произведения на главную страницу своего раздела. Кликните по меленькой надписи «Edit» чуть левее названия произведения. В раскрывшемся окне кликните по надписи «Редактировать иллюстрации». В раскрывшемся окне через кнопки «Обзор» и «Загрузить» последовательно закачайте на «Самиздат» все файлы картинок, прописанные в произведении, включая дополнительные, на которые планируете попадать по ссылкам. Не рекомендую делать и качать единый архивированный файл — экономия времени мизерная, а ошибок случается много.

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

      Ну вот, слава богу! Проверьте работу ссылок к отдельным иллюстрациям (если они были предусмотрены). Удовлетворены? Тогда опять через меленькую надпись «Edit» заходите в окно регистрации произведения и меняйте статус доступа на чтение «Для всех» — пусть наслаждаются!

Организация галлереи.

      В статье «Колыма. Лично причастны...» я столкнулся с необходимостью размещения нескольких картинок друг рядом с другом, так называемой «галлереи», наподобие тех, что мы часто встречаем в «Википедии». Можно ли такое организовать в «Самиздате»? Разумеется, да!

      И здесь нам на помощь приходит использование таблиц.

      Приведу пример.

      Не комментируя на этот раз подробно, всё же дам краткие пояснения.

      Как не сложно увидеть, здесь «вмещающая» таблица также состоит из одной строки и одной ячейки. И поскольку мы не оговариваем её ширину, она распространяется вправо и влево на всё возможное пространство, отведённое тексту (а вот оно у меня справа и слева ограничено невидимыми для читателя рамками, и догадаться об этом можно только по наличию полей справа и слева от текста. Более подробно такой способ форматирования текста описан в «Самоучителе»). Высота «вмещающей» таблицы регламентируется автоматически по содержанию ячейки.

      Внутренняя таблица состоит из двух строк по три ячейки в каждой. В верхних ячейках «прописаны» картинки. Причём, как видно, средняя ячейка со знакомым содержанием по-прежнему является «ссылочной». Чтобы не дать картинкам (и подписям под ними)сомкнуться, параметр cellpadding для этой таблицы принят равным 15.

      Однако, без дополнительных мер подписи, размещённые в трёх нижних ячейках, «оторвались» бы от картинок аж на 30 пикселей, что выглядело бы коряво. С этой целью для нижней строки прописан параметр valign="top", «прижимающий» содержимое ячеек (то есть подписи) к верхней границе рамок.

      Инициалы Г. С. Жжёнова в подписи под вторым рисунком разделены неразрывным пробелом — это типографическая норма. «Угловые» кавычки я в примерах HTML-кодами не заменял (а надо бы!), чтобы не затруднять излишне чтение текста.

      Вот, пожалуй, и все хитрости. Смотрим, что получилось:

==================================

Начало примера

==================================

Народный артист СССР Георгий Степанович Жжёнов. Фото сайта «ACTORIA.RU». Из «колымских гастролей» Г. С. Жжёнова. Экспозиция Магаданского областного краеведческого музея.. Георгий Жжёнов в фильме «Берегись автомобиля». Фото сайта «RUSKINO.RU».

==================================

Конец примера

==================================