Как верстаться в Самиздате, или Дилетантский HTML.
Добрый сутк, дамы и господа!
Когда я в 2001 пришёл на Самиздат и начал читать выложенные здесь произведения, мне не понравилось несколько 'чисто верстальных' моментов, которые мешали привыкшему к книжкам взгляду комфортно скользить по строчкам, не отвлекаясь на многочисленные перестройки (отсутствие выравнивания прозаического текста по правому краю делает строчки 'разнодлинными', что существенно напрягает восприятие). И я поставил себе мутную цель 'чёбы красиво', которую худо-бедно решил, но иногда незначительно улучшаю её новые реализации, узнавая новые хтмл-ные фишки (короче, открываю Америки и изобретаю велосипеды:). Не профи, что делать.
В данной статье я предлагаю Вам поставить цель и достичь её примерно так же, как это делал Ваш покорный.
Цель: хочу, чтобы мой текст, лежащий на СИ, был читабелен и выглядел не хуже нормального вордовского:
1. был отформатирован по обоим краям,
2. имел абзацы,
3. имел, где надо, активные оглавления (сёрфинг от оглавления к главам/рассказам и обратно).
Подход к решению: Самиздат даёт возможность заливать текст, не прицепляя вордовский файл, а вставляя из буфера в окно 'текстэдита' (см. рабочее окно СИ 'Добавить произведение'). Чтобы было что заливать, нужно:
1. иметь нормально отформатированный текст в формате Ворд:
а) каждый абзац в нём фактически является одной строкой, которую Ворд 'переносит' нужное ему количество раз сам, автоматицки). Сравните с форматом ТХТ: там каждая видимая нами строчка в абзаце заканчивается невидимым в обычном режиме спецсимволом Enter.
б) если у нас есть списки/планы (например, такой, какой Вы сейчас читаете), нужно, чтобы они были неавтоматическими, то есть цифры и буквы пунктов были бы проставлены ручками.
в) начальные тире прямой речи также должны быть просто тире, а то многие авторы оформляют диалоги автоматическим ненумерованным списком, что затрудняет вёрстку в хтмл-е.
2. иметь стандартный виндузёвый редактор WordPad или Writе. Я не пользуюсь программами-спецверсталками, а окончательно формирую хтмл-файл именно в вульгарном ВордПаде. Не очень сложный текст (с минимумом внутренних ссылок, а также слов и кусков текста, выделенных жирным, подчёркнутым или наклонённым шрифтами) верстается в течение пяти минут. Если текст посложнее, то приходится посидеть подольше, руками расставляя теги (спецкоманды броузеру), описывающие гиперссылки и изменения вида шрифта.
3. Для ускорения процесса у меня есть файл макет.html.
Давайте изготовим такой же. Для этого скопируем в буфер нижеприведённый текст до матерка </html> включительно, вставим его в заранее открытый текстовой файл в редакторе WordPad или Writе и сохраним, скажем, под именем макет.html
Сам текст таков:
<html>
<font face=Arial size=2px>
<center>
<h3><U>
ТУТА ЗАГЛАВИЕ
</h3></U><BR><BR><BR><BR>
<div align="justify">
ТУТА НАШ ТЕКСТ
</div>
<BR><BR>
<p align=right>
<font size=1px><B><i>
(C)
ТУТА ПОДПИСЬ И ДАТА
</font></B></i>
</html>
/конец текста файла "макет"/
Итак, мы приступаем к вёрстке текста.
Для примера берём кусок текста, представив, что это некая миниатюра, уже лежащая у нас на винте в некоем вордовском файле sizoff.doc:
— — — — — —
Сизифов офис
Рабочий день вязко тянулся к концу. Влад изнывал, наблюдая, как нехотя ползут стрелки часов. Словно за циферблатом находился не механизм, а накачанные транквилизаторами черепахи в колесе.
По конторе медленно слонялись клерки-сомнабулы. Они думали, что снуют. Они, съевшие собаку на имитации ударного труда, верили, что суетятся. Самое ужасное — Влад даже жмурился, когда вспоминал об этом — они все беззаветно верили в иллюзию, которую однажды изобрели сами же: "мой труд полезен".
— — — — —
Алгоритм☺ вёрстки:
1. Открываем наш sizoff.doc в ворде.
Решаем следующие задачи: расстановка тегов, обозначающих начало абзацев и красную строку; расстановка тегов, описывающих 'жирное' состояние слова 'Самое' и наклон последних слов текста.
Теги, обозначающие начало строки и красную строку:
<BR> — команда, которую всякие там интернет-эксплореры понимают как 'отобразить текст с новой строки';
<DD> — команда, позволяющая сделать отступ — 'красную строку'. По сути результаты этой команды сильно смахивают на те, что мы получаем в ворде, когда нажимаем клавишу 'Tab'.
Итак, каждый наш абзац должен начаться матерком <BR><DD>.
Если Вы верстаете для стандартного Internet Explorer, то достаточно одного тега <DD>, который в нём не только организует отступ, то и начинает новый абзац.
Во время проведения конкурса 'Разбитое зеркало' я выяснил, что Netscape Navigator"у <DD> недостаточно (эти два броузера кое в чём несовместимы). Один из участников, работающий в Нетскейпе, дал мне совет пользовать оба тега вместе (за что ему спасибо, т.к. мы стремимся к тому, чтобы наш текст радовал любого пользователя, а не только интернетэксплорерного:).
Теги, помогающие утолщать, наклонять и подчёркивать текст:
<B> — после этого тега текст становится жирным. Действие тега прекращается тегом </B>
<i> — текст наклоняется. Прекращение — </i>
<U> — текст подчёркивается. Прекращение — </U>
КСТАТИ, совершенно неважно, заглавными будут буквы тега или мелкими.
Итак, мы должны получить в ворде такой текст:
— — — — — — — — —
Сизифов офис
<BR><DD>Рабочий день вязко тянулся к концу. Влад изнывал, наблюдая, как нехотя ползут стрелки часов. Словно за циферблатом находился не механизм, а накачанные транквилизаторами черепахи в колесе.
<BR><DD>По конторе медленно слонялись клерки-сомнабулы. Они думали, что снуют. Они, съевшие собаку на имитации ударного труда, верили, что суетятся. <B>Самое</B> ужасное — Влад даже жмурился, когда вспоминал об этом — они все беззаветно верили в иллюзию, которую однажды изобрели сами же: "<i>мой труд полезен</i>".
— — — — — — — — — — — —
Безусловно, в такой маленький текст эти теги быстро вставляются руками, но если текст большой, руками не натычешься, есть возможность теги, описывающие абзац (<BR><DD>), вставить автозаменой.
Жмём пункт вордовского меню 'Правка', затем выбираем 'Заменить', открывается серое окно замены. Там тыкаем кнопку 'Больше', окно 'дооткроется'. Там тычим кнопку 'Специальный', открывается подменю-список спецсимволов. Выбираем самый верхний '^p — Знак абзаца'. Теперь в поле 'Найти' стоит этот спецсимвол: ^p. Переходим в поле 'Заменить' и снова ставим этот же спецсимвол а потом добавляем к нем наши теги <BR><DD>. Поучаем матерок: ^p<BR><DD>. Жмём 'Заменить всё'. Вот и всё.
Вернёмся к алгоритму.
Мы выделяем наш текст и копируем его в буфер. Этап работы в ворде закончен.
Да, после выполнения следующего пункта ворд можно закрыть, не сохраняя текста — зачем Вам текст с какими-то тегами...
2. Открываем WordPad (Пуск, Программы, Стандартные, WordPad) и в нём уже открываем наш макет.html
Вместо надписи 'ТУТА НАШ ТЕКСТ' вставляем наш текст из буфера.
Переносим название 'Сизифов офис' на место надписи 'ТУТА ЗАГЛАВИЕ'.
Сохраняем это всё командой 'Сохранить как' (она сидит в меню 'Файл' вордпада) под удобным нам именем (например, sizoff.htm) в удобной нам папке (например, 'Мои документы').
Теперь мы можем из Проводника открыть свежеиспечённый файл и поглядеть, что получилось.
Если что-то не нравится, то переходим в окно вордпада и правим. Поправили, сохранили — снова прыгаем в окно Эксплорера (или какой у Вас броузер) с открытым хтмл и жмём кнопку 'Обновить'. Смотрим результат.
Возникает ВОПРОС: а зачем таскать из ворда в вордпад, если эти редакторы имеют одинаковый сермяжный смысл? Ответ: если бы мы попробовали сохранить хтмл-текст в ворде, мы бы в нашем файле сохранили бы кучу хлама, который любит присобачивать ко всему подряд "мудрый" ворд.
3. Нас устраивает, как выглядит текст в окне броузера и мы решили опубликоваться в СИ.
Заходим на Самиздат, регистрируемся, в своём разделе выбираем 'Добавить произведение', заполняем все пункты 'анкеты', но вместо закачки из файла вставляем из буфера загодя выделенный полностью и скопированный в буфер из WordPad"а текст нашего sizoff.htm.
КСТАТИ, быстрое копирование в буфер можно провернуть, нажав клавиши Ctrl+Insert, а быстро вставить из буфера можно, нажав Shift+Insert. Эти мульки работают практически во всех виндузёвых программах.
Сохраняемся и смотрим, что там у нас получилось на СИ.
Результат — мы залили на СИ простенький текст.
Операции пункта 2 мы сделали, фактически не разбираясь, что было в макете кроме названия и нашего текста.
Чуть-чуть разберёмся с текстом моего макета:
<html> — тег, обозначающий начало хтмл-кода (не обязателен)
<font face=Arial size=2px> — описание шрифта: гарнитура и величина
<center> — текст будет форматироваться по центру
<h3><U> — тег h3 (а можно и 1, 2, 4...) нужен для отображения заглавия, которое увеличивается и "жирнится" без нудных описаний другими тегами
ТУТА ЗАГЛАВИЕ
</h2></U><BR><BR><BR><BR> — отмены предыдущих тегов и отступ от заглавия
<div align="justify"> — команда к тому, чтобы текст выравнивался по обоим краям
ТУТА НАШ ТЕКСТ
</div>
<BR><BR><p>
<p align=right> — текст выравнивается по правому краю
<font size=1px><B><i> — знаем уже, нечего повторяться
(C)
ТУТА ПОДПИСЬ И ДАТА
</font></B></i>
</html> — конец нашего макета
Теперь о том, как организовать оглавление.
Тег, который описывает гиперссылку, выглядит так:
<a href="(путь)"> Название</a> , где
(путь) — путь к Вашему файлу (пример — /p/panarin_s_w/vsehuman.shtml)
или путь к оставленной Вами в тексте метке (как раз наш случай, когда из оглавления мы хотим попасть, например, к главе 5 или части 3)
Кусочек саморекламы: в моём сборничке миниатюр 'Всё как у людей' вовсю используются гиперссылки оглавления для сёрфинга внутри сборника.
Откройте и поглядите, как там энто всё работает.
Затем, если понравилось, сохраните у себя на винте и откройте 'Всё как у людей' для редактирования в ВордПаде (КСТАТИ: можно просто щёлкнуть правой кнопкой мыши по открытой страничке, выбрать пункт меню "Показать в виде ХТМЛ" и насладиться кодом, открытым в редакторе "Блокнот". Правда, лично мне он не нравится — очень уж примитивный, и всё равно приходится копировать в Пад или Ворд:).
Поглядите, как организованы оглавление и метки у заголовков. Думаю, там всё интуитивно понимается на раз. ☺
Вариант со стихотворением и переводом.
Допустим, Вы перевели ...дцатый сонет Уильяма нашего Шекспира. И хотите сделать так, чтобы для наглядности оригинал и перевод были рядом, а не друг под другом. Неудачный пример:
If you wanna have a sex
fuck my dog. His name is Rex.
О, люди! Животных любите!
Вот с Жучки хотя бы начните...
Такая компановка текста достигается использованием таблиц. Вот как это выглядит в хтмл-е:
<table border=0 cellspacing=0 cellpadding=0>
<tr>
<td width=50% valign=top><font color="000099">
<br><dd>If you wanna have a sex
<br><dd>fuck my dog. His name is Rex.
</font></td>
<td width=10% valign=top >
</td>
<td width=50% valign=top ><font color="000099">
<br><dd>О, люди! Животных любите!
<br><dd>Вот с Жучки хотя бы начните...
</font></td>
</tr>
</table>
Объяснять значения тегов пока не стану: мало кому надо (а кому надо, те покопаются в сетевых шпаргалках), а куда стишки вставлять — и так понятно, не правда ли?
На сегодня всё.
На вопросы отвечу завсегда.
Советы приму с радостью.
Все эти мои фокусы суть дилетантские изыскания, произведённые мной самостоятельно, зачастую интуитивно, и спасибо добрым людям, которым я задавал вопросы и получал ответы.
Ещё один кусочек наглой саморекламы: поглядите, как работают бегущие строки на примере моего сборничка "Куда б соломки подстелить?". Просмотр в ВордПаде развенчает тамошние пафосные эффекты.
Обязательно загляните в раздел "Инфо". Там есть статья Сергея Серёгина "Способы размещения текстов и оформления раздела на сайте "Самиздат".
Поглядите статью Андрея Тёртого о вёрстке здесь.
А Дмитрий Тихонов — просто маг хтмл-а. Зайдите, удивитесь!
Ещё сильно рекомендую сходить на сайт Артемия Лебедева. Там много всякой полезной и доступной нам — юзерам информации о хтмл-е.
С почтением к удостоившим меня прочтением, Антиобозреватель С.
(с)S.V.P., марток, 2003
Special'ные thank'и: Данная статья не была бы написана, если бы:
Николай Чуксин не "спровоцировал" меня обобщить свои рабочие записи о вёрстке с тем, чтобы отправить ему в порядке обмена опытом;
Кошка и Юрий Вальтер не сделали запрос выслать им "такую жу":), подтвердив сим, что предмет статьи является востребованным;
Сергей Сечив не высказал мысль, что такая инфа может быть полезной для многих и хорошо бы было забабахать статью.
Таким образом, означенным даме и господам выражаю искренние сеньки веримачёвые и лицемерно перекладываю на них часть авторской ответственности.☺
