Как упаковать в html-файл: картинки, css и js?

Question

[EvgenyMorozov]

Добрый день

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

Для чего нужно: заменить flash в производстве баннеров и тексто-графических блоков.

Comments

[Alexandr Flasher]

Может кто-то находил инструмент для автоматической такой упаковки?

Answer 1

[mr-molodoy]

Доброго времени суток.
Например стили можно не подключать а разместить в тег
<style>
JavaScript разместить в тег
<script>

Изображения в качестве фона в css можно установить след. образом:

background-image: url(data:image/gif;base64,{{base64_content}});

Изображения на странице можно поместить так же

<img src="data:image/gif;base64,{{base64_content}}" alt="" />

Шрифты в css:

@font-face {
    font-family: 'FontName';
    src: url(data:font/truetype;charset=utf-8;base64,{{base64_content}}) format('truetype'),
         url(data:font/woff;charset=utf-8;base64,{{base64_content}}) format('woff');
}

Где {{base64_content}} - это картинка закодированная в base64.
Закодировать можно здесь b64.io

Answer 2

[Антон]

Вы про конкретный инструмент спрашиваете или как теоретически это сделать?
Если теоретически - то стили можно прописать или
<style></style>
или инлайном
Со скриптами - аналогично, есть тег
<script></script>
Картинки - гуглите data uri.

Comments

[EvgenyMorozov]

Да, про конкретный инструмент, а ля "Сделать красиво одной кнопкой" по ссылке.

Answer 3

[Денис Инешин]

Это всё лишнее, на данный момент рич-баннеры вполне себе встраиваются на страницы в виде единственного ифрейма.

Comments

[EvgenyMorozov]

Сейчас я так и делаю. Но вот появилась ситуация, когда нужно встроить тексто-графический блок без iframe. Грубо говоря, от до

[EvgenyMorozov]

От дива до /дива