Как разбить html на файлы

Обновлено: 06.07.2024

Как я могу разделить содержимое HTML-файла на куски размером с экран, чтобы" разбить " его на страницы в браузере WebKit?

каждая "страница"должна показывать полный текст. Это означает, что строка текста не должна быть разрезана пополам в верхней или нижней границе экрана.

редактировать

этот вопрос был первоначально помечен как "Android", поскольку я намерен создать Android ePub reader. Однако, похоже, что решение может быть реализовано только с помощью JavaScript и CSS я расширил область вопроса, чтобы сделать его независимым от платформы.

основываясь на ответе Дэна, вот мое решение этой проблемы, с которой я боролся до сих пор. (этот JS работает на iOS Webkit, никаких гарантий для android, но, пожалуйста, дайте мне знать результаты)

надеюсь, что это помогает.

Это вообще не плоть; я не играл с этим в течение нескольких месяцев, но если я правильно помню, просто вставьте ePub в каталог отладки, и когда вы запустите программу, просто введите некоторую часть имени (например, под куполом, просто введите "купол"), и он будет отображение деталей книги.

У меня он работал правильно для нескольких книг, но любые электронные книги из Google Books сломали его полностью. У них совершенно странная реализация ePub (по крайней мере, для меня) по сравнению с книгами из других источников.

в любом случае, надеюсь, некоторые из структурных кодов там могут помочь вам!

мне тоже пришлось закодировать что-то вроде этого, и мое (рабочее) решение таково:

вы должны применить эти строки к webview.

кроме того, вы должны ввести некоторый javascript. У меня было множество проблем с различными масштабами моей деятельности и контентом, отображаемым в webview, поэтому мое решение не имеет никакой ценности "извне".

недавно я попытался что-то подобное этому и добавил стиль CSS, чтобы изменить макет на горизонтальный, а не вертикальный. Это дало мне желаемый эффект без необходимости каким-либо образом изменять содержимое Epub.

код должны работа.

надеюсь, что это помогает.

может быть, это сработает, чтобы использовать XSL-FO. Это кажется тяжелым для мобильного устройства, и, возможно, это перебор, но он должен работать, и вам не придется реализовывать сложности хорошей разбиения на страницы (например, как вы убедитесь, что каждый экран не разрезает текст пополам).

основная идея была бы:

преобразуйте XHTML (и другие материалы EPUB) в XSL-FO с помощью XSLT.
используйте процессор XSL-FO для отображения XSL-FO в формат подкачки, который можно отобразить на мобильном устройстве, например PDF (можно ли это отобразить?)

Я не знаю, есть ли процессор XSL-FO, доступный для Android. Вы можете попробовать Apache FOP. RenderX (процессор XSL-FO) имеет преимущество наличия параметр вывода paged-HTML, но опять же я не знаю, Может ли он работать на Android.

существует несколько способов сделать это. Если каждая строка находится в своем собственном элементе, все, что вам нужно сделать, это проверить, выходит ли один из ее краев за пределы представления (либо браузеры, либо "страница книги").

Если вы хотите знать, сколько "страниц" будет заранее, просто временно переместите их в представление и получите, какая строка заканчивается на странице. Это может быть медленным из-за того, что страница оплавления требуется для браузера, чтобы знать, где что есть.

в противном случае я думаю, что вы можете использовать элемент HTML5 canvas для измерения текста и / или рисования текста.

недавно эта же проблема и вдохновленные ответами нашли простое решение CSS, используя столбец CSS3 - * атрибуты:

приведенный выше пример дает отличные результаты на retina iPhone. Игра с различными атрибутами дает разные интервалы между страницами и тому подобное.

я смог улучшить Начо решение для получения горизонтального эффекта подкачки с помощью WebView. Вы можете найти решение здесь пример код.

Edit:

MainActivity.java

в onJsAlert моего WebChromeClient получите количество горизонтальных страниц, которые я передаю пользовательскому HorizontalWebView для реализации эффекта подкачки

HorizontalWebView.java

вы можете разделить страницы на отдельные файлы XHTML и сохранить их в папке. Например: page01, page02. Затем вы можете отобразить эти страницы одну за другой под другой.

Как разбить шапку header на 3 части
Подскажите пожалуйста, как разбить шапку на 3 части без использования тега dev, создал левый.

Как разбить строку на части?
Esli u menya est` stroka vot takogo tipa: mCiVgr

pE4 teper`, mne nado ee razbit` na chasti.

Как разбить проект на части?
Привет всем! Подскажите правило, по которому можно разбить большой проект на отдельные части.

Как разбить базу на 2 части?
База ведется с 2002 года, нужно разбить ее на две части одну с 2002 по 2008 и что бы вторая база.

Я не хочу использовать сторонние программы или утилиты. Хочу научиться это делать сам, своими ручками =) Здравствуйте. Делаю сайт и хочу разбить html код на части, чтобы footer, header, sidemenu и т.д. были отдельными файлами, чтобы их можно было подключить на каждой странице сайта. Уже который день ищу и не могу найти работающий, правильный пример. Можете кинуть пример или объяснить как это делается? Это делается, например, с помощью:
1. тега <iframe>
2. средств java script (ajax)
3. языков веб-программирования (php) Я знаю что можно подключить, например файл header.php, при помощи include или require, но у меня это не получается. Возможно из-за того что я делаю это локально, а эти функции работают только с серверами. Сейчас даже скачал шаблон такого способа, но ничего не работает. В чем может быть проблема? Я знаю что можно подключить, например файл header.php, при помощи include или require, но у меня это не получается. Возможно из-за того что я делаю это локально, а эти функции работают только с серверами. Сейчас даже скачал шаблон такого способа, но ничего не работает. В чем может быть проблема? Можно придумать бесконечное количество того, "в чем может быть проблема". У вас вообще стоит сервер? К нему подключено php? Если так то покажите код хотябы. Можно придумать бесконечное количество того, "в чем может быть проблема". У вас вообще стоит сервер? К нему подключено php? Если так то покажите код хотябы. Это index.php шаблона, который я только что скачал. по идее все должно работать, т.к. все уже прописано. Но когда открываю index.php вижу голую страницу с текстом. Извините за тупость, я более-менее знаю основы, но это для меня уже сложно Это index.php шаблона, который я только что скачал. по идее все должно работать, т.к. все уже прописано. Но когда открываю index.php вижу голую страницу с текстом. Извините за тупость, я более-менее знаю основы, но это для меня уже сложно А если посмотреть html код этой "голой" страницы через браузер, там будут видны строки:

Clonic, чтоб работать с php файлами, вам нужно установить локальный сервер. К примеру денвер установите.

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

Этой строчкой мы разрешаем использовать в html php код.
Далее уже подключаем вами знакомые инклюды:
Соответственно при работе с php файлами файл .htaccess с вышеуказанным содержимым не нужен. Ага, я глупил сильно. Я открывал .php файлы на рабочем столе. Работаю я с xampp. Кинул в папку htdocs и открыл через браузер этот файл и все заработало. Php я изучал где-то год назад, сейчас начал заново работать и многое забыл уже. Всем большое спасибо за подсказки =)

Разбить массив на 4 части по диагонали и посчитать сумму в каждой части
Двумерный массив. Разбить массив на 4 части по диагонали и посчитать сумму в каждой части. Помогите.

Как разбить TStringList на части по 15 строк?
Как разбить TStringList на части по 15 строк? Вот так вот вроде пашет но оно показывает только.

Как разбить json на две части
Как разобрать json Здравствуйте. помогите разбить JSON вида: с:

Как разбить обьект на части в 3d max?
Есть модель башни и пушки танка. Как сделать чтобы башня отделилась от пушки? Помогите пожалуйста.

Как вытащить данные из ячейки и разбить их на части
Задача: на главной странице располагается блоки со следующими названиями: Керамическая плитка.

Как разбить заголовок в материалах на две части?
Здравствуйте. Нужно разбить в материалах заголовки на 2-3 части. Например, Бла-бла <br> блаблабла.

редактировать

надеюсь, что это помогает.

в любом случае, надеюсь, некоторые из структурных кодов там могут помочь вам!

мне тоже пришлось закодировать что-то вроде этого, и мое (рабочее) решение таково:

вы должны применить эти строки к webview.

код должны работа.

надеюсь, что это помогает.

основная идея была бы:

преобразуйте XHTML (и другие материалы EPUB) в XSL-FO с помощью XSLT.
используйте процессор XSL-FO для отображения XSL-FO в формат подкачки, который можно отобразить на мобильном устройстве, например PDF (можно ли это отобразить?)

недавно эта же проблема и вдохновленные ответами нашли простое решение CSS, используя столбец CSS3 - * атрибуты:

Edit:

MainActivity.java

HorizontalWebView.java

Наиболее популярной является блочная верстка сайта или div верстка. Наш урок блочной верстки сайта поможет начинающим освоить основные приемы div верстки.

1. Основные понятия

Блок – это обычная прямоугольная область, обладающая рядом свойств, таких как: рамка, поля и отступы (рис. 1). Содержимым блока может быть что угодно – текст, картинки, списки, формы для заполнения, меню навигации и т.п.

Рамка (border) – это контур, для которого можно задать такие характеристики как толщина, цвет и тип (пунктирная, сплошная, точечная).

Поля (padding) – отделяют содержимое блока от его рамки, чтобы текст, например, не был «впритык» к стенкам блока.

Отступы (margin) – это пустое пространство между различными блоками, позволяющее на заданном расстоянии расположить два блока относительно друг друга.

Блочная верстка сайта включает в себя блоки. Блоки, как и таблицы – это элементы, всегда располагающиеся на странице вертикально. То есть, если в коде страницы записаны подряд два блока, то отобразятся они в браузере один под другим. Если нам нужно расположить несколько блоков горизонтально, то в их свойствах задается такой параметр как «обтекание» (float). Но об этом чуть позже.

В данной работе мы создадим web-страничку из блоков. Сначала создадим контейнер, в который, как в коробку сложим наши блоки. Для наглядности каждый блок будет иметь свой цвет. Конечный результат должен быть таким как на рис. 2.

Контейнер будет содержать в себе пять блоков:

TOP – шапка сайта, обычно содержит логотип компании, название, заголовки и слоганы, поиск, навигацию;

CENTER – содержит основной текст страницы;

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

Для теста нашего сайта нам понадобятся как минимум три самых популярных браузера – Opera, Fire Fox, Internet Explorer.

Описание web-страницы в основном делается в CSS документе.

2. «Фиксированный» дизайн методом блочной верстки

1. Создайте в блокноте новый документ с расширением css и сохраните его под именем mystyle.css.

2. Создайте HTML-документ и сохраните его в той же папке.

3. В самом начале HTML-документа впишите следующую строку: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Определяет тип нашего документа. Любая грамотно сверстанная страница должна в самом начале содержать так называемый DOCTYPE. Нужен он для всевозможных устройств вывода информации и браузеров в том числе. Пока что все ныне существующие браузеры прекрасно обходятся и без указания DOCTYPE. Но уже грядут те времена, когда страница сайта, сразу начинающаяся с тэга <html>, просто не будет прочитана, потому как стандарты становятся жестче.

Мы определили нашу страничку в соответствии с DOCTYPE под названием Strict 1.0.

Требования здесь весьма строгие – все тэги, не имеющие закрывающей пары, должны заканчиваться пробелом со слэшем / перед закрывающей угловой скобкой. Но вот ведь сам DOCTYPE тоже выглядит как тэг! Почему же у него нет этого пробела со слэшем? А просто! Захотелось так разработчикам этих строгих правил. Но это единственный случай, где правило не работает.

4. Одной строкой между тегами <head> и </ head > присоедините документ mystyle.css к документу HTML (рисунок 3).

5. В таблице стилей наберите код как на рисунке 4.

6. Добавьте в mystyle.css шапку сайта (рисунок 5).

7. Добавим HTML документ следующий код между тегами body (рисунок 6).

И у Вас должно получиться следующее (рис. 7).

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

8. Откройте css-документ и добавьте следующий код (рисунок 8).

9. Сразу после закрывающегося тега <div id ></div> вставим следующий код (рисунок 9).

10. Откройте HTML-документ в браузере. Должно получиться такая div верстка (рисунок 10).

11. Теперь добавьте блок footer самостоятельно. Браузер должен показать такую блочную верстку сайта (рисунок 11).

Рассмотрим атрибуты relative и absolute.

Иногда бывает необходимо разместить какой-то блок в строго заданном положении относительно родительского.

Рассмотрим простейший код.

Создайте html-документ, в теле которого разместите код, как на рисунке 12.

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

Попробуем сделать так (т.е. абсолютно позиционируем дочерний блок относительно родительского).

2. Создайте таблицу стилей, в которой наберите код из листинга на рисунке 13.

3. Проверьте web-страничку в браузере. Вот что получилось (рисунок 14). Это не то, что мы хотим, не так ли? Наш дочерний элемент ушел не к маме, а к дедушке (т.е. BODY)!

Проблема решается довольно просто: родителю дополнительно задаётся position: relative;

4. Измените код своей таблицы стилей в соответствии с рисунком 15.

5. Проверьте web-страничку в браузере. Результат на рисунке 16. Оцените разницу.

Контрольное задание

Создать web-страницу, внешний вид которой изображен ниже на рисунке 17

3. «Резиновый» сайт методом блочной верстки

В заданиях 1 и 2 мы рассмотрели «фиксированный» дизайн методом блочной верстки, т.к. все блоки имели точное значение по ширине и высоте в пикселах.

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

Задание 3. Создадим «резиновый» блочный макет как на рисунке 18.

1. Создайте HTML-документ с кодом, как на рисунке 19. Сохраните документ.

2. Создайте таблицу стилей как на рисунке 20. Сохраните документ. Вы должны получить результат ка на рисунке 18.

3. Изменяя размеры браузера, проанализируйте поведение макета.

4. Комбинированная блочная верстка

Комбинированная блочная верстка (div верстка) включает как блоки фиксированной ширины, так и блоки в процентном отношении к ширине экрана.

Задание 4. Создадим комбинированный блочный макет как на рисунке 21.

1. Создайте HTML-документ с кодом, как на рисунке 22.

2. Создайте таблицу стилей как на рисунке 23. Сохраните документ. Вы должны получить результат ка на рисунке 21.

Читайте также: