Дикая Яблоня: другие произведения.

Оформление раздела на Самиздате: готовые коды и полезные советы

Журнал "Самиздат": [Регистрация] [Найти] [Рейтинги] [Обсуждения] [Новинки] [Обзоры] [Помощь]
Peклaмa:

Конкурс LitRPG-фэнтези, приз 5000$
Конкурсы романов на Author.Today
  • Аннотация:
    Все проверено на собственном опыте и занесено в Путеводитель.
    Задавайте вопросы, если не нашли в статье то что вас интересует.

Готовые варианты оформления

Скопируйте код, зайдите в [Сведения о разделе] и вставьте его в Annotation (аннотация), т.е. вот вот сюда, Вставляйте код перед всем тем текстом, который у вас в аннотации. Готовый код включает в себя цвет текста, цвет ссылок (активных/по умолчанию/посещенных) и бэкграунд.

<body text="#455154" alink="#33CCFF" link="#44758F" vlink="#455154" background=http://ic.pics.livejournal.com/pyrus_acerba/12900176/229705/229705_original.jpg>
Посмотреть образец
<body text="#000000" alink="#FFA500" link="#663300" vlink="#464646" background=http://ic.pics.livejournal.com/pyrus_acerba/12900176/230038/230038_original.jpg>
Посмотреть образец
<body text="#000000" alink="#9999FF" link="#2E48AC" vlink="#483D8B" background=http://ic.pics.livejournal.com/pyrus_acerba/12900176/230300/230300_original.jpg>
Посмотреть образец
<body text="#00004A" alink="#00BFFF" link="#214A8E" vlink="#405476" background=http://ic.pics.livejournal.com/pyrus_acerba/12900176/230483/230483_original.jpg>
Посмотреть образец
<body text="#041100" alink="#CCFF66" link="#666633" vlink="#5A5A5A" background=http://ic.pics.livejournal.com/pyrus_acerba/12900176/230781/230781_original.jpg>
Посмотреть образец
<body text="#000000" alink="#FF6666" link="#663333" vlink="#666666" background=http://ic.pics.livejournal.com/pyrus_acerba/12900176/231125/231125_original.jpg>
Посмотреть образец
<body text="#333333" alink="#DAA520" link="#7E4400" vlink="#663333" background=http://ic.pics.livejournal.com/pyrus_acerba/12900176/231212/231212_original.jpg>
Посмотреть образец
<body text="#333333" alink="#DAA520" link="#7E4400" vlink="#663333" background=http://ic.pics.livejournal.com/pyrus_acerba/12900176/231618/231618_original.jpg>
Посмотреть образец
<body text="#455154" alink="#33CCFF" link="#44758F" vlink="#455154" background=http://ic.pics.livejournal.com/pyrus_acerba/12900176/231916/231916_original.jpg>
Посмотреть образец
<body text="#041100" alink="#8BD34B" link="#5A7E3D" vlink="#5A5A5A" background=http://ic.pics.livejournal.com/pyrus_acerba/12900176/232079/232079_original.jpg>
Посмотреть образец

Вы можете поэксперементировать с оформлением, взяв один из данных кодов за основу. Знать html для этого не нужно.
Чтобы заменить бэкграунд, вам нужно будет переписать в коде строчку с его адресом (выделен синим цветом):
 (Дикая Яблоня)
а чтобы изменить цвета ссылок, нужно будет переписать в коде их номера (выделены синим цветом):
 (Дикая Яблоня)

 Полезная информация
Цвет страницы на СИ - #E9E9E9;
цвет информационных блоков - #E0E0E0;
цвет названия раздела - #CC5555;
здесь - таблица html-кодов цветов, буквенное написание и коды цветов в RGB;
здесь - грандиозная коллекция фонов в формате JPG и GIF (но учтите: большинство файлов - довольно тяжелые, рекомендую их оптимизировать).

Важно (даже если вы не знаете HTML)

 Создавая дизайн своей страницы помните: главное в ней - содержание, а не украшательства. Лично я со страниц, перегруженных украшательствами, почти всегда ухожу немедленно. Фон не должен затмевать шрифты, а иллюстрации - отвлекать от текста.

 Не перегружайте раздел графикой (даже о-о-очень красивой), а используемую - оптимизируйте!

 Придерживайтесь правила "Три цвета, два шрифта". Помните: шрифты с засечками НЕ рекомендуется смешивать со шрифтами БЕЗ засечек.

 При оформлении своего раздела (не только главной страницы, но, прежде всего, - текстов) отдавайте предпочтение шрифтам без засечек: Arial, Tahoma, Verdana. Набранные ими тексты гораздо легче читать, особенно с мобильных девайсов.

 Не используйте для оформления своего раздела декоративные шрифты, которых нет в операционной системе по умолчанию. Нет никакой гарантии, что эти шрифты есть на компе вашего читателя. Если нет - система подменит их первым попавшимся. Результат... мягко говоря - непривлекательный. Это касается не только Самиздата, но и всех страниц в инете. Если вам все-таки НУ ОЧЕНЬ надо использовать декоративные шрифты - вставьте надпись картинкой. Шрифты, которые адекватно отображаются на Самиздате: Arial, Verdana, Tahoma, Courier, Impact, Georgia, Garamond, Times New Roman (этот - не гарантирую).

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

О создании собственного оформления

Условие: вы знаете HTML, хотя бы основы. Если не знаете даже основ, ознакомьтесь с ними здесь или здесь. Серьезный учебник - здесь.

 Не пытайтесь пользоваться CSS - прописать стили не получится (на самом деле иногда получается, но в совершенно бесполезных местах, например - в описании к иллюстрациям).

 Закрывайте парные тэги (даже если закрытие некритично, например тэг p - параграф) - это ускоряет загрузку страницы.

 Виды шрифтов и прочие параметры, состоящие более чем из одного слова (например: Times New Roman) ОБЯЗАТЕЛЬНО(!) надо прописывать в кавычках или апострофах.

 Текст в разделе "Об авторе" по умолчанию оформляется шрифтом Arial (курсив). Не хотите по умолчанию - впишите в [Сведения об авторе] таблицу. С текстом внутри таблицы можете творить что угодно.

 Если вписать в [Сведения об авторе] таблицу шириной 100%, состоящую из двух равных ячеек, вставить в правую ячейку, к примеру, смайлик (любую другую картинку и пр.) и задать в ячейке выравнивание align=right, то содержимое ячейки окажется поверх Самиздатовского информационного блока. Бесполезная чушь, но может получиться забавно. Пример см. здесь

 Объем раздела "Об авторе" на главной странице ограничен, не поместившееся уходит под ссылку "подробнее>>>" Не хотите видеть эту ссылку - считайте количество символов с пробелами, у меня предел получился 480, примерно.

 Основную часть главной страницы оформляем через [Сведения о разделе] -> Annotation (аннотация). Через тэг BODY задано оформление ссылок (здесь же можно задать цвет текста в разделе). Следующим тэгом задан вид шрифта "по умолчанию".

 (Дикая Яблоня)

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

 Если вы хотите увеличить верхний, левый и правый отступ от края страницы, использовать таблицы совсем не обязательно. Добавьте в тэг BODY параметры topmargin (отступ сверху), leftmargin (отступ слева) и rightmargin (отступ справа). Результат см. здесь (заданы параметры topmargin="10" leftmargin="35" rightmargin="35").

 Еще одно место, где могут сработать стили - перед тэгом BODY. Хотите скрыть все верхние СИшные блоки, с имени автора и по "Начните знакомство с" включительно? Для этого поместите BODY в фиксированный слой - впишите перед ним кусочек кода
 (Дикая Яблоня)
Что получилось, посмотрите на моей гл.странице. Теперь имя автора и название раздела можно вписывать каким угодно шрифтом или даже оформить картинкой... НО

 в таком оформлении есть (для кого-то) и минус: теперь не видно ссылку "РЕГИСТРАЦИЯ/РАЗРЕГИСТРАЦИЯ", дату последнего обновления, суммарное количество посещений и т.п. Ничего страшного: ссылка "РЕГИСТРАЦИЯ" есть на всех страницах, а блок с информацией отображается на главных страницах вложенных разделов. Чтобы раздел стал вложенным достаточно зайти в [Сведения о разделе] и поставить перед названием раздела @. При этом название раздела становится ссылкой на список произведений, а сам список уходит на index_1, index_2 и т.д.
Только учтите, доказано кувалдой: читатели не очень-то любят лазать по вложенным разделам. Не отправляйте в глубину то, чем действительно дорожите.

 Тэги bordercolor, bordercolorlight и bordercolordark гарантированно работают только в IE. Универсальное оформление рамочки для таблицы можно сделать, вписав одну таблицу в другую.
Задайте внешней таблице border=0 (обязательно), cellspacing=0 cellpadding=4 (необязательно такие, лишь бы был отступ) и цвет фона (например)Forestgreen. Задайте внутренней таблице border=0 (обязательно), другой цвет фона (например)Silver (и/или бэкграунд картинкой) и ширину 100%.
Получится примерно вот что:
 
это будет смотреться одинаково во всех браузерах, старых и новых.

 Фоновая картинка (бэкграунд) моего раздела задана через таблицу. Цвет фона можно задать и через тэг "BODY", но в IE возможны глюки.
Бэкграунд в моем разделе - узкий и оч.длинный, 2000px: подстраховалась ради больших мониторов. Но это уже личные заморочки, не обращайте внимание, задавайте квадратный фон - не ошибетесь.

 Содержание аннотации к разделу отображается в алфавитном оглавлении Самиздата, НО! учитывается только обычный текст без картинок. Описание моего раздела в оглавлении СИ выглядит примерно так:

 (Дикая Яблоня)

Объем аннотации, отображаемой в оглавлении СИ, ограничен. Оформите с помощью HTML только то, что действительно важно, а лирические отступления, которые мало кому интересны, вставьте картинкой (лучше всего - gif).

 Аннотации дополнительных групп, на которые вы разделили ваши произведения, также оформляются с помошью HTML.

 Изменить цвет и размер шрифта в имени автора и названии раздела на главной странице у меня не получилось, кто справится, тот - молодец! Это же касается и вложенных страниц. Не пытайтесь использовать HTML в формах для имени и названия.

 Если унылые обязательные информационные блоки (личные сведения, список жанров, поздравления и т.д.) вам несимпатичны, сделайте их частью дизайна. Вариант посмотрите у меня.
Если вы все-таки обнаружили в чьем-то разделе, что блоки (а также название раздела и все прочее) имеют необычный дизайн/отсутствуют совсем, это означает: владелец раздела создал для оформления файл со своими собственными стилями (CSS). Как мне объяснили на форуме помощи "Создание своего раздела", для использования индивидульных CSS надо просить разрешение редактора.

 Оформить index_1 и index_2 и т.д. можно по тому же принципу, что и главную страницу: через [Сведения о разделе] -> Доп. группы (и аннотации) -> Аннотация с помощью тэга BODY. Использовать слои на вложенных индексах и прочих страницах НЕ СЛЕДУЕТ!
Cтраницы с произведениями можно оформить точно так же, на них тэг BODY нужно вставлять в аннотацию к произведению (при этом страницы комментариев к данным текстам тоже получают новый дизайн).

 Если все, по вашему мнению, смотрится красиво, это не значит, что другие видят то же самое. Страница, аккуратно выглядящая в Опере, запросто может перекоситься в Огнелисе. Вид шрифта "по умолчанию" (если он не задан специально), межсимвольный интервал, межстрочный интервал и многое другое зависит от конкретного браузера и его настроек. Проверьте свой раздел на кроссбраузерность. Обязательно посмотрите, как выглядит ваша страница при разных разрешениях монитора (1024*768, 1280*1024 и т.д.)

 Статистика Самиздата время от времени уходит погулять, ничего страшного, она всегда возвращается, НО:
можете поставить дополнительный счетчик, только помните: код с java-скриптом работать не будет, берите простой HTML-ный.
Около 800 стилей счетчиков с HTML-ным кодом предлагает сайт http://counter.co.kz/, можно задать начальное значение.
Если хотите больше услуг (задать начальное число хитов/хостов/посетителей/сессий, отключить подсчет заходов с вашего компьютера и пр.), воспользуйтесь счетчиками сайта http://gostats.ru/ (HTML-ный код, стилей - много, есть невидимые).

 Интересная информация с форума "Технические вопросы Самиздата" для тех, кто не обеспокоен статистикой, а напротив - желает, чтобы ее не было вовсе: чтобы статистика файла с произведением не обсчитывалась, нужно в имя файла добавить сочетание букв stat. Пример: статистика файла "zolushka.shtml" будет обсчитываться, а статистика файла "zolushkastat.shtml" - нет (о том, чем имя файла отличается от заглавия, читайте ниже).

 Если вас не устраивает Самиздатовский поиск, можете вставить себе на страничку форму поиска через Google или Яндекс. Обе формы можно посмотреть здесь

Код формы поиска через Google

<form action="http://www.google.com/search" method="get" target="_blank"><table border=0 cellpadding=0 cellspacing=1><tr><td><font size=4><b>Google</b></font>&nbsp;&nbsp;</td><td align=right><input maxlength="250" size="25" name="q"></td><td align=left><input value="Искать на Samlib.ru" type="submit"><input value="http://samlib.ru" name="sitesearch" type="hidden"></td></tr></table></form>


Код формы поиска через Яндекс

<form action="http://www.yandex.ru/yandsearch" method="get" target="_blank"><table border=0 cellpadding=0 cellspacing=1><tr><td><font size=4><b>Яндекс</b></font>&nbsp;</td><td align=right><input maxlength="250" size="25" name="text"></td><td align=left><input value="Искать на Samlib.ru" type="submit"><input value="http://samlib.ru" name="serverurl" type="hidden"></td></tr></table></form>


Параметры, которые можно менять:
Ширина таблицы (table), в которую заключена форма поиска. Рядом с table допишите width= и задайте нужную вам ширину в пикселях или процентах (например: width=80% или width=600px). У меня ширина не задана, по умолчанию она 100%;
maxlength - количество букв и знаков в запросе;
size - ширина строки запроса;
надпись на кнопке - "Искать на Samlib.ru" (можно заменить другим текстом);
адрес сайта, по которому производится поиск: "http://samlib.ru" (можно заменить другим адресом, например - zhurnal.lib.ru).
Имейте в виду: поиск по коментариям выполняться не будет, т.к. комментарии не индексируются роботами.

 Если хотите вставить линеечку, более-менее удачные есть на сайтах: lines.wlal.ru и line.romanticcollection.ru.

 Если хотите провести опрос, его можно создать здесь (создав, выберите вариант "С помощью html-формы") или здесь, а потом вставить html-код на СИ. Помните: в коде не должно быть ни скриптов, ни фреймов! Вставляйте опрос в аннотацию, а не в текст произведения.

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

 По возможности воздержитесь от использования спецсимволов - некоторые из них движок Самиздата не пропускает. Так вместо символа "Копирайт" (C в круге) вы получите бессмысленную закорючку.
Если спецсимволы вам все-таки необходимы, не копируйте их изображения из других текстов! Они должны быть заданы HTML-кодом (есть вероятность, что при последующем редактировании текста эти коды слетят - не забывайте проверять, сохранились ли спецсимволы).
Некоторые часто используемые символы и знаки (не потеряйте при копировании кода точку с запятой!). Большой справочник символов - тут.
Символы
(так они
выглядят)
html-коды
(так символы
записывают)
©
(копирайт)
&copy;
´
(знак ударения)
&acute;
§
(параграф)
&sect;
-
(тире)
&mdash;
&
(амперсанд )
&amp;


 Не используйте свой раздел как хранилище для картинок! И уж тем более для использования абсолютных урлов картинок - на СИ это запрещено!
Не скажу ничего нового: www.radikal.ru - хороший хостинг для графики. Неплох www.picshare.ru - меньше опций, чаще падает, но тоже вполне годный.

Дополнительная информация

  Об оформлении комментариев на Самиздате
Не пытайтесь использовать при написании комментариев HTML-ные тэги - они там не работают.
В принципе, вполне достаточно написать слово в р а з б и в к у, или ЗАГЛАВНЫМИ БУКВАМИ, или выделив слово _знаком подчеркивания_ (андерлайном). Но если вам этого мало, можете использовать возможности СИшного форматирования: если поставить перед словом правую угловую скобку (знак "больше") >, в комменте слово будет выглядеть >вот так;
если заглючить слово в квадратные скобки [     ], в комменте слово будет выглядеть вот так.

  О сохранении своего раздела
Всвязи с участившимися падениями/переездами/etc сервера настоятельно рекомендую вам делать бэкап всего своего раздела вместе с комментариями. Пользователям браузера Firefox в этом поможет плаг-ин ScrapBook (по поводу остальных браузеров ничего не могу сказать).

  О работе с файлами текстов
Будьте внимательны: не путайте понятия "Имя файла" и "Заглавие"! Имя файла - название того .doc-, .rtf-, .html- или .txt-файла, в котором ваше произведение было сохранено, и того .shtml-файла, в котором произведение находится на Самиздате. Имя файла должно быть записано только цифрами и лат.буквами, возможно использование дефиса и/или андерлайна. Заглавие может быть записано по-русски, по-украински, по-английски и т.д. Пример: имя моего файла с текстом - office_story, заглавие миниатюры, которая находится в этом файле - Не получилось.
В вашем разделе на Самиздате имена файлов располагаются в алфавитном и цифровом порядке. Если вы хотите, чтобы рассказы, статьи или главы большого произведения располагались не как попало, а в строгом порядке, задавайте файлам с тестом соответствующие имена, например: a_story, b_story и т.п. Или chapter001, chapter002 и т.п. Используя нумерацию, начинайте отсчет с нуля (т.е. 001, 002 и т.д.). Eсли начнете нумерацию с 1, а потом появится 11, этот номер встанет за единицей, а не за десяткой.
Будьте внимательны, присваивая имя файлу: не забывайте, что сочетание букв stat отключает статистику данного файла.
Заглавия ваших произведений никак не влияют на порядок их расположения. Заглавия произведений можно изменять, от этого в вашем разделе ничего не исчезнет и не испортится, НО!
Будьте ОЧЕНЬ внимательны и сто раз подумайте. нужно ли вам изменять имя файла, потому что в этом случае навсегда исчезнут все оценки текста, находящегося в этом файле.

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

  Чтобы не пришлось в панике метаться с вопросом "Куда девался мой текст? За что?! Почему?!!!111" НИКОГДА(!) не указывайте в аннотации/названии возрастные рейтинги произведений, как это делают, например, на ТВ или радио (т.е. ноль-плюс, столько-не-живут-плюс и т.д.) Такие тексты удалят БЕЗ предупреждения (и правильно сделают: подобные пометки - лишний повод занести СИ в черные списки).

  Не используйте на СИ адреса, начинающиеся с https:// Вот именно с s движок их не понимает (инфа с технического форума).

  И последнее, но тоже может пригодиться (хотя лучше б не пригодилось): если в вашем разделе что-то глючит и(или) накрылось совсем - выкручивайтесь сами или спрашивайте друзей. На тех.поддержку СИ лучше особо не рассчитывать.






РЕКЛАМА: популярное на LitNet.com  
  В.Фарг "Излом 2.0" (ЛитРПГ) | | М.Эльденберт "Скрытые чувства" (Любовное фэнтези) | | А.Каменистый "S - T - I - K - S. Цвет ее глаз" (Постапокалипсис) | | В.Василенко "Смертный" (Боевое фэнтези) | | Р.Райль "Приоритет: Жизнь" (Научная фантастика) | | В.Соколов "Обезбашенный спецназ. Мажор 2" (Боевик) | | В.Конте "Omega. Инстинкт борьбы" (Антиутопия) | | Э.Широкий "Красный бог" (Киберпанк) | | А.Каменистый "Существование" (Боевая фантастика) | | В.Екатерина "Истинная чаровница " (Любовное фэнтези) | |
Связаться с программистом сайта.

Новые книги авторов СИ, вышедшие из печати:
А.Гулевич "Император поневоле" П.Керлис "Антилия.Полное попадание" Е.Сафонова "Лунный ветер" С.Бакшеев "Чужими руками"

Как попасть в этoт список
Сайт - "Художники" .. || .. Доска об'явлений "Книги"