Эпиграф в стиле tumblr (перевод windymind)
Нет, туториала по кодам и макетам тут не будет. Это всего лишь практические советы на соответствующею тематику, которые многие не соблюдают. Подойдёт для администраторов, самостоятельно делающим дизайн для своего форума. Всяким профи это вряд-ли нужно.
1. Три основных цвета
Перед тем, как делать дизайн, подберите три основных цвета. Да, в дизайне их может быть намного больше (да хоть 100), но у вас всегда должны быть три основных, которые в той или иной мере используются чаще. Используйте палитру цветов по полной, подбирайте как цвета, так и их произвольные. Определяйте на глаз, насколько цвета подходят друг другу, и никогда не выбирайте а ля красный-зеленый-желтый. Советую не прибегать к сильно ярким цветам (фигась), как не ставьте их, они всегда будут раздражать глаз, если они основные.
2. Никакого постепенно набирающегося текста
Прошлый век. Никого этим не удивить, очередная "каменная фишка", которая лишь надоедает и не более.
3. Никаких gif-шапок
Никогда, ни за что, не используйте gif-шапки. Размер этих шапок ну просто огромный. Если у вас в шапке есть gif, следует вырезать участок, сохранить отдельно и наложить его поверх простой jpg шапки. Делается это достаточно просто:
<div style="margin-top: 10px; margin-left: 20px; position: absolute;"> <img src="адрес гифки"> </div>
Если вся шапка - сплошной гиф, удалите все исходники и начните делать нормальный дизайн.
4. Не надо использовать png где попало
Помните - png очень жирный формат. Он выигрывает в качестве изображения у jpg и проигрывает тому же jpg в весе. Если вам строго наплевать, что кто-то может не быть счастливым обладателем безлимитного скоростного интернета, тогда флаг вам в руки. Используйте png исключительно для тех изображений, где вам нужен прозрачный фон, не более. Поверьте, в дизайне для форума никто не побежит в гостевую, жалуясь на качество jpg - оно несущественно, если вы не шоперский задрот, конечно.
5. Комментарии
Если вы берёте откуда-то код/скрипт, обязательно добавляйте комментарий, в котором укажите, что этот код/скрипт делает. Если вы владеете базовым html/css/js, вам это может и не нужно, но если вы не такой крутой веб-девелопер, тогда не пренебрегайте комментариями.
HTML комментарий (хтмл-верх, хтмл-низ, объявление, форма ответа):
<!-- комментарий -->
CSS комментарий (свой стиль, внутри тегов <style> </style>):
/* комментарий */
JS комментарий (внутри яваскрипта (много непонятных букв):
// комментарий в одну строку
Поверьте, так будет намного легче.
6. Код
Хорошо:
<div id="pun-break"> <table> <tr> <td>Содержимого первого блока</td> <td>Содержимое второго блока</td></tr> <tr> <td>Содержимое третьего блока</td> <td>Содержимое четвёртого блока</td></tr></table> <br><br> <center>Какая-та цитата</center> </div>
Плохо:
<div id="pun-break"><table><tr><td>Содержимого первого блока</td><td>Содержимое второго блока</td></tr><tr><td>Содержимое третьего блока</td><td>Содержимое четвёртого блока</td></tr></table><br><br><center>Какая-та цитата</center></div>
Думаю, тут всё понятно. Чем удобней читается, тем меньше времени вы тратите на поиск нужного и тем меньше случайных удалений будете допускать.
7. Используйте CSS
CSS успешно справляется не только с заливкой, но и с градиентом и вообще со многим. Погуглите парочку статей о том, что умеет CSS, и не нужно пихать в дизайн кучу ненужных "пустышек" в виде заливки простым цветом, это лишь нагружает страницу.
8. Используйте repeat
Очень часто, дизайнеры сохраняют фон (к примеру) огромным мегабайтным изображением, когда можно вырезать кусок и заставить его повторятся. Изрядно уменьшается вес страницы и пропадает двухминутная подгрузка фона.
chto-to {
background-image: url(images/bg_grey.png); /* Путь к фоновому рисунку */
background-position: left bottom; /* Положение фона */
background-repeat: repeat-x; /* Повторяем фон по горизонтали *9. Сохраняйте исходники дизайна на форуме.
Хостингам свойственно падать и зависать. Лучше загружайте изображения на свой форум (в админке). Если изображения не будут отображаться, вы хотя-бы будете знать, что и форум не работает (платформа), а не какие-то технические работы на radikal'е.
10. Кросс-браузерность
Браузерам свойственно тупоумие, возникающая вследствие каких-то тайных конфликтов между тем, что вы написали в кодах, и тем, что понял браузер. Проверяйте дизайн в основных браузерах (Chrome/Firefox/Opera/Safari), и если один из них что-то не так отображает, либо гуглите, либо обращайтесь на тех. поддержку. Вот вам список css хаков для различных браузеров, знающие разберутся, незнающие уточнят в тех. поддержке:
Браузеры и стандарты. Вечная погоня. Из-за несоответствий стандартам, из-за разных способов рендеринга страниц большая часть времени веб-дизайнера уходит на то, чтобы загладить эти несоответствия (использовать хаки). В итоге, вместо эффективной работы, дизайнер вступает в противоестественные отношения с браузерами, теряя драгоценное время.
Кросс-браузерность — свойство сайта отображаться и работать во всех популярных браузерах идентично.
Хак — исправление ошибки или добавление новой функции посредством использования другой недокументированной или некорректно реализованной особенности. (с) Lurkmore
Грязный хак — это быстрое решение какой-либо проблемы, в основном в краткосрочной перспективе, лишающее сущность код внутренней красоты и дисгармонирующее с её внутренним устройством. (с) LurkmoreКод:/* хак только для IE8 Only */ .myClass { color:red\0/; /* красный */ padding:70px\0/; /* отступ 70px только для Internet Explorer 8 */ } /* IE 6 Only */ * html .myClass { ... } /* All except IE6 standards */ .myClass { property /**/: value; } /* Firefox & IE 7, и выше */ html>body .myClass { ... } /* Modern browsers only (not IE 7) */ html>/**/body .myClass { ... } /* IE 7 Only */ *:first-child+html .myClass { ... } /* Firefox Only */ @-moz-document url-prefix() { .myClass { ... } } /* Opera Only */ noindex:-o-prefocus, .MyClass { color:red; } /* IE7 Only */ div[class^="myClass"] .myClass2 { ... } /* IE7 only */ *+html .myClass { ... } /* hack for Opera <=9 */ html:first-child .myClass { ... } /* Firefox, Opera, Konqueror, Safari */ *|html .myClass { ... } /* IE8 beta 2 only (?)*/ html:first-child .myClass [attr|=a-b] { ... } /* IE5/Mac only */ /*\*//*/ .myClass { property: value; } /**/ /* Gecko only */ .myClass:not([attr*=""]) { ... } /* Opera @media all and (min-width: 0px) { html:first-child .myClass { ... } } /* Safari only */ .myClass:not(:root:root) { ... } /* Safari 3.0 and Chrome only */ @media screen and (-webkit-min-device-pixel-ratio:0) { .myClass { .... } } /* Chrome browser */ body:nth-of-type(1) .myClass { ... } /* Safari browser css hack */ body:first-of-type .myClass {property:value;}
Работать вы можете только в одном браузере, но кросс-браузерность всё же нужно соблюдать, но никак не заставлять всех неугодных менять ради форума браузер (тем более, если у вас непопулярный браузер, такой, как Яндекс.Браузер или упас боже Интернет от Mail.ru).
сейчас двигала как раз футер, правда не на своем дизе. но встало ровно везде после того, как я сделала одинаковым по ширине футер, фон тела форума и шапку. если сделать чуть больше что-то, то только будет ровно в том браузере, в котором верстаешь.
