про дайривёрстку

[Теодорик Ходячая Катастрофа]

Я ни на что не претендую, скорее всего все уже всё знают, я просто хотел написать шпаргалку - и для себя, и для других, кому это может пригодится.

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)px; widthсколько надо, чаще всего 95-100)%;
И ещё одна просьба от моих, и не только, глаз - не забывайте указать междустрочный интервал и отступы (попалась мне случайно визитка, в которой текста было много, а отступов указано не было, и он лепился вплотную к краю блока Т_Т не надо так)

4. Для удобства

4. Для удобства
Просто ряд вещей, упрощающих мне жизнь, может быть ещё кому пригодится

- Notepad++ или любая другая удобная вам программа с функцией подсветки синтаксиса - удобно отслеживать незакрытые теги, и вообще, гораздо комфортнее набирать код, чем непосредственно в посте на дайри
- собрать в отдельный файл все повторяющиеся элементы и держать под рукой. Кнопки, разделители, "покрашенные" ссылки, коды для превью, если там что-то сложнее просто заданного размера, а, например, рамочка, тень и всё такое, коды для всплывающих подсказок, если у вас так оформлены сноски и т.п.
- добавляйте alt="пояснительный текст" картинкам, особенно кнопкам и заглушке, на случай падения хостингов или других проблем
- если в вёрстке есть заливка фона картинкой, редактировать пост с вёрсткой можно только с одного и того же аккаунта. При выкладке на соо битвы картинку нужно ещё раз залить в БИ и сохранить себе её адрес.
- <center></center> лучше, чем <div align="center"></div> если больше ни для чего не нужен див

5. Шпаргалка (просто так)

5. Шпаргалка (просто так)

line-heightсколько надо)px; - междустрочный интервал
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: (сколько надо)px; - скругление углов
opacity: 0.(сколько надо) - прозрачность
box-shadow: 0px 0px (сколько надо)px rgba(0, 0, 0, 0.(сколько надо)); - тень <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение>
текст со сноской¹ текст со сноской¹
<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]

@настроение:

@темы: ФБ, бывает и такое, рабочий процесс, WTF Combat, бессмысленно и беспощадно, BDSM с матчастью, зажевало кодом, натянуть сову на глобус, прикладывать вместо подорожника, земля наша велика и обильна, дайрибытие

Comments

[Clara Oswin Oswald]

Хорошая шпора) только вот другие проги, кроме нотпада, начинают сообщать об ошибках при верстке кода для дайри. Тут все-таки специфика)
А чья была визитка без паддингов? Кто совесть потерял?

Кстати, дивы вполне успешно можно заменять спанами, если не нужен перенос сроки)

[Теодорик Ходячая Катастрофа]

Clara Oswin Oswald, я всё не доползу потестить разные проги, это может быть очень любопытно

А чья была визитка без паддингов?

на последующих выкладках у них уже были, так что им явно сказали и без меня)

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

интересно, тоже надо потыкать варианты) так то я спаны для текста юзаю только...

Отправлено из приложения Diary.ru для Android

[Clara Oswin Oswald]

Теодорик Ходячая Катастрофа, style спанам задаешь, и... Посмотри в Маги коды в шапках, где моря со спойлерами)

[Теодорик Ходячая Катастрофа]

Clara Oswin Oswald, гляну обязательно)