Готовые варианты оформления
Скопируйте код, зайдите в [Сведения о разделе] и вставьте его в 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> </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> </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-коды
(так символы
записывают) |
© (копирайт) | © |
´ (знак ударения) | ´ |
§ (параграф) | § |
- (тире) | — |
& (амперсанд ) | & |
• Не используйте свой раздел как хранилище для картинок! И уж тем более для использования абсолютных урлов картинок - на СИ это запрещено!
Не скажу ничего нового: 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 движок их не понимает (инфа с технического форума).
• И последнее, но тоже может пригодиться (хотя лучше б не пригодилось): если в вашем разделе что-то глючит и(или) накрылось совсем - выкручивайтесь сами или спрашивайте друзей. На тех.поддержку СИ лучше особо не рассчитывать.
|