Я ни на что не претендую, скорее всего все уже всё знают, я просто хотел написать шпаргалку - и для себя, и для других, кому это может пригодится.
1. Про размеры поста:
- максимальное число символов в посте
62 000 символов (примерно девять тысяч слов)
- максимальное число символов в комментарии
10 240 символов (примерно полторы тысячи слов)
- максимальное число морей в посте
100 -
здесь сервис, для вёрстки макси,
оф знакосчиталка,
онлайн-считалка, умеющая обрезать текст до нужного количества символов
- дайри разворачивают [L] и [J] в вот такое вот: <a class="TagL" target="_blank" title="Верстка Фандомной Битвы" href="http://anon-html.diary.ru">Diary HTML</a> и <a class="TagJIco" target="_blank" title="профиль" href="http://www.diary.ru/member/?3306817"> </a><a class="TagL" target="_blank" title="дневник: Верстка Фандомной Битвы" href="http://anon-html.diary.ru">Diary HTML</a>
Поэтому будьте аккуратны при вёрстке деаона.
Diary Accounter умеет генерировать "развёрнутый" [J] если скормить ему ник, чтобы проще было считать кол-во символов в посте. Ещё полученный код можно править руками, меняя цвет ника и подставив свою картинку вместо собаки. Или убрать собаку вообще, но оставить ссылку на профиль, а не на дневник, что гораздо удобнее
2. Ещё ссылки
-
htmlbook - теги, синтаксис, атрибуты - куча всего полезного
-
HTML теги на дайри - какие теги поддерживает дайри, с указанием поддерживает ли атрибуты и какие
-
веб цвета - десятичные и шестнадцатеричные коды цветов, практически везде и всегда отображающихся одинаково
-
сочетания цветов -
"укоротитель ссылок" особенно актуально если много кнопок для перехода по постам, и их внезапно стало больше, а количество символов рассчитано впритык -
простыня про вёрстку и оформление на инсайде
3. Динамическая вёрстка и другие слёзные мольбы3. Динамическая вёрстка и другие слёзные мольбы
Пожалуйста, делайте вёрстку динамической! Не все читают-смотрят с больших мониторов, планшеты с телефонами и нетбуки тоже имеют право на жизнь.
Достаточно в самом первом диве задать max-width: (сколько надо, но, пожалуйста, не больше 800) widthсколько надо, чаще всего 95-100)%;
И ещё одна просьба от моих, и не только, глаз - не забывайте указать междустрочный интервал и отступы (попалась мне случайно визитка, в которой текста было много, а отступов указано не было, и он лепился вплотную к краю блока Т_Т не надо так)4. Для удобства4. Для удобства
Просто ряд вещей, упрощающих мне жизнь, может быть ещё кому пригодится
- Notepad++ или любая другая удобная вам программа с функцией подсветки синтаксиса - удобно отслеживать незакрытые теги, и вообще, гораздо комфортнее набирать код, чем непосредственно в посте на дайри
- собрать в отдельный файл все повторяющиеся элементы и держать под рукой. Кнопки, разделители, "покрашенные" ссылки, коды для превью, если там что-то сложнее просто заданного размера, а, например, рамочка, тень и всё такое, коды для всплывающих подсказок, если у вас так оформлены сноски и т.п.
- добавляйте alt="пояснительный текст" картинкам, особенно кнопкам и заглушке, на случай падения хостингов или других проблем
- если в вёрстке есть заливка фона картинкой, редактировать пост с вёрсткой можно только с одного и того же аккаунта. При выкладке на соо битвы картинку нужно ещё раз залить в БИ и сохранить себе её адрес.
- <center></center> лучше, чем <div align="center"></div> если больше ни для чего не нужен див5. Шпаргалка (просто так)5. Шпаргалка (просто так)
line-heightсколько надо) - междустрочный интервал
text-align: justify; - выравнивание текста по ширине
padding: или px, или %; - поля вокруг блока. 1 - со всех сторон, 2 - верх-низ, право-лево, 3 - верх, право-лево, низ, 4 - верх, право, низ, лево
margin: или px, или %; - поля внутри блока. 1 - со всех сторон, 2 - верх-низ, право-лево, 3 - верх, право-лево, низ, 4 - верх, право, низ, лево
интересный эффект даёт использование отрицательных значений, но надо не забывать оставлять пробелы до, например <div style="margin: -170px 0px 0px" align="center"> "поднимет" картинку, засунутую в этот див, над блоком
border-radius: (сколько надо) - скругление углов
opacity: 0.(сколько надо) - прозрачность
box-shadow: 0px 0px (сколько надо)px rgba(0, 0, 0, 0.(сколько надо)); - тень <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение>
текст со сноской<sup>1</sup> текст со сноской1
<span title="сноска" style="border-bottom: 1px dashed #000; padding-bottom: 1px; cursor: default;">солво</span> солво
<div style="float:right; margin-left:(число)px"><img style="box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.5)" src="превью" width="250px;"></div> - превью арта справа от шапки, вставляется до шапки
<a href="ссылка" style="text-decoration: underline; color: #цвет" target=_blank>слово</a>
[MORE=<span style="text-decoration: underline; color: #цвет">читать дальше</span>]текст[/MORE]