HTML+CSS+JavaScript

Как кто делает вёрстку страниц, похожую на страницу книги? Есть макет, который надо привести к наиболее удобному в работе виду. Всем известный Фай .нридер выдаёт подобные страницы в таком виде: (приложен архив). В страницах есть простой текст, код скриптов (целыми абзацами), код в нескольких словах абзаца, имя переменной в абзаце.

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

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

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

<hr class="line"> <h3>заголовок <span>страница 5</span></h3> <div class="text"> текст<br> текст<br> текст<br> текст<br> текст<br> текст<br> текст<br> текст<br> </div> <hr class="line"> <div class="text"> текст<br> текст<br> текст<br> текст<br> </div> <h3>заголовок <span>страница 5</span></h3> <div class="text"> текст<br> текст<br> </div>

и разные таблицы стилей:

<style> /*вариант ридера*/ /*.text, h3{     margin:20px 0 0 90px;     width:600px; }*/ </style> <style> /*вариант без полей*/ /* ка-то так */ </style> <style> /*вариант без разбивки на страницы*/ hr.line{display:none} </style>

А нужно-ли это все? Для бумажного представления ведь существуют специализированные проги. Да даже Ворд для многих вещей подойдет. А для электронных книг может тоже спец. проги есть?

Спецпроги (FR, DW) множат стили - я же эти 2 стр из FR взял, и как, нравится? :) Если убрать его мусор, объём файла htm уменьшится раз в 6.

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

-

AlexSol: да, что-то подобное, но в приведённой вёрстке есть обрамление таблицей. Оно со своим layout-fixed хорошо помогает держать размеры страниц. И рамки можно нарисовать. Как бы поудобнее совместить исчезающие номера страниц и их рамки и содержание страниц? Скриптом - понятно, пробежались, перестроили DOM, новый документ готов. А только стилями? Возможно, наложенное содержание на подложку из абсолютно позиционированной рамки таблицы. Или сменить стиль обрамляющей таблицы так, чтобы она не мешала?

не понятна задача.
layout-fixed что дает? что происходит с текстом если он превышает размер страницы?

может как альтернатива для div - overflow: hiden; clip(....);

>И рамки можно нарисовать
рамки и для контейнера рисуются.

>исчезающие номера страниц и их рамки и содержание страниц?
уточните чего ше должно быть в каждом варианте.

>Скриптом - понятно, пробежались, перестроили DOM, новый документ готов
мне абсолютно не пончтно.... :)

>Возможно, наложенное содержание на подложку из абсолютно позиционированной рамки таблицы. Или сменить стиль обрамляющей таблицы так, чтобы она не мешала?
опять не очень ясно.

можно сделать либо подключение одного трех разных стилей (.css) к одной странице или через javascript менять свойства стиля.

12345: так что- не использовать пока ваш шаблон по аяксу с 1-ой главой? Вы предупреждайте, а то работа пойдет на смарку!

coloboc66 - нет, используй, ничему не помешает. Замену шаблонов потом можно сделать.

Со старым шаблоном контролировать удобнее.

AlexSol (29.09.2006 в 15:00)
> to: 12345 (29.09.2006 в 14:47)
> не понятна задача.

Есть образец 2 страниц вёрстки в приложенном файле 1-го сообщения. Он имеет какие-то достоинства. Задача - сделать такой шаблон, чтобы достоинства были примерно те же или больше. Варианты необходимые перечислены (3 стиля). Делаем для себя, поэтому задачу можно как угодно развивать. Например, придумать, чтобы стили переключались динамически.

table-layout:fixed даёт неизменность ширины таблицы при любом контенте. Правда, в FF контент вылезает из-под таблицы вправо, если не помещается, с этим тоже надо как-то побороться.

>рамки и для контейнера рисуются.
У него своя рамка, а здесь таблица с фиксированной шириной (контейнер так не умеет) и рамка у него.

> уточните чего ше должно быть в каждом варианте.
1) так, как сейчас - образы страниц;
2) промежуточный вариант - убрали фиксированность с таблиц, сняли распорки с дивов - страница стала похожей на веб-страницу. Номера страниц и разделители можно не убирать;
3) убираем промежутки и вообще напоминания о страницах, чтобы вся глава или параграф превратились в одну веб-страницу. В основном, нужно, чтобы удобно копировать коды программ из примеров. Поэтому коды программ из разных страниц должны слиться (в идеале). Поэтому переход в такой режим желателен динамический, по кнопке (Опера потребует перезагрузки, а другие могут без неё).


>>Скриптом - понятно, пробежались, перестроили DOM, новый документ готов
>мне абсолютно не пончтно.... :)
Ну можно же переформатировать как угодно принятый документ, работая с DOM - стереть таблицу, слить вместе коды в PRE, и т.д. Но отладка и написание весьма долгое.

>Возможно, наложенное содержание на подложку
Снизу - таблица с рамкой, сверху - та же таблица с контентом. Обе - абсолютные. Поэтому можем выключить рамку без нарушения расположения. (Это я всё думаю о динамичности.)

надо подумать.

подумал.

прищел к выводу, что использование таблиц не обосновано.

table-layout:fixed заиенил на overflow:hidden. если тектс больше ширины блока, то он прячется. можно попробовать побороть, но надо на пример смотреть конкретный.

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

Хорошо, спасибо, может быть, сегодня подберу и завтра выложу результаты.