кэп-без-верстальщика
Спасибо тебе от такого же одинокого кэпа!(

Еще один одинокий кэп присоединяется к благодарностям

мимопробегающий верстальщик
Спасибо за такой хороший набор советов, как раз пригодится )))

Для картинок прописывать альтернативный текст alt
Тексту межстрочный интервал настраивать. На дайри он маловат.
Размер основного текста лучше сделать 14px если это Ариал, Таймс Нью Роман или Джорждия, и можно 16 если это Колибри, Кандара и Камбрия. основной контент это тексты, и лучше чтобы их было удобно читать.
Если у вас белый фон, то не стоит шрифт делать чёрным, лучше серым. Достаточно серым, чтобы легко читался текст. но не на столько чтобы резало от контрастности как при ч\б сочетании.
Если у вас резиновая вёрстка, то отступы от края лучше указывать в процентах, а не пикселях.

А вот на счёт фиксированной ширины я не против ни разу. Так как тогда гораздо больше возможностей в оформлении есть, читать удобней. И фиксированная ширина делается в расчёте на 1024х768. Для планшетов это вполне подходит. А телефоны... Я не понимаю, как в здравом уме можно пойти на ФБ с телефона. Верстка выкладок в любом случае слишком деревянная, чтобы удовлетворить потребности их разрешений. Им просто стоит включить "Игнорировать оформление текста при просмотре избранного" тогда. И вопрос исчерпан.

Анончики, а подкиньте, пожалуйста, код для красной строки, потерял.
Сперва я делала через

, но тут:
1. Образуются промежутки между абзацами.
2. Текст должен быть внутри <p>ТЕКСТ</p> . И если нет подспорья, то ручками… я не пожелаю этого никому.
3. Чтобы промежутки между абзацами были не такими большими, все параграфы нужно будет сделать единой строкой, но при этом промежутки между параграфами останутся. Поясню.

читать дальше

Поэтому я использовала такой код.
читать дальше

А нельзя просто оформить выкладку как пост в дайрике с заглушками?
кэп без верстальщика
Немного странный вопрос, если честно. Кто может запретить сделать так как вам хочется или можется?
Оформление это скорее инструмент рекламы, привлечения внимание. Если оно сделано так что улучшает читабельность и создаёт нужное настроение, то оно ценно. Это узнаваемость от одной цветовой гаммы и не заметить выкладки уже сложнее. Но если оформление ради оформления (то бишь декорации стоят выше контента, все украшения скорее рассеивают внимание, нежели фокусируют), то оно скорее навредит, чем поможет. Но каким бы ни было оформление — главное контент. Если он тухлый, то ничто не поможет. Разве что сотни виртов.

Поэтому я использовала такой код. Он помещается перед абзацем. Конечно перед каждым абзацем, но это проще плясок вокруг <p>ТЕКСТ</p> .
а чем проще-то? второй вариант легко делается автозаменой ^p на </p><p>
а первый... ^p на ^p<span style="padding-left: 30px"></span> ?
ну не вручную же вы это делаете, так в чём проявляются пляски?
и если говорить о вёрстке текстов конкретно на дайри, то </p><p> занимает 7 символов на каждый абзац, а <span style="padding-left: 30px"></span> 40 (39, если убрать пробел перед 30px)
С учётом того, что у дайри ограничение в постах на кол-во знаков, это огромная разница.

и если говорить о вёрстке текстов конкретно на дайри, то

занимает 7 символов на каждый абзац, а 40 (39, если убрать пробел перед 30px)
С учётом того, что у дайри ограничение в постах на кол-во знаков, это огромная разница.

Именно для абзаца нужно </p style="text-indent: 30px"><p> (32, если убрать пробел перед 30) И по моему опыту, это не спасает.
И если использовать параграф + отступ, то текст будет рыхлый и неопрятный. Тут либо одно либо другое. Если точнее, то это ещё ничего, когда у текста фиксированная ширина, где-то порядка 600-700px (и то не всегда спасает), но в подавляющем большинстве мы имеем резинку. И при резинке такое сочетание выглядит уродливо. Поэтому и не советую так делать.

ну не вручную же вы это делаете, так в чём проявляются пляски?
По началу в ручную. Потом был ворд и его автозамена. Конвертеры выдают кучу мусора, которую поседеешь выгребать. Если кто знает альтерантивы, буду признательна за наводку.

По началу в ручную. Потом был ворд и его автозамена. Конвертеры выдают кучу мусора, которую поседеешь выгребать. Если кто знает альтерантивы, буду признательна за наводку.
Notepad++, Sublime Text 2 и учить регулярные выражения хотя бы в минимуме. Позволяет очень быстро делать автозамену не по конкретным словам, а по подходящим выражениям, например, "\s\d\d" выделить все подстроки, где есть пробел и две цифры подряд.

Именно для абзаца нужно </p style="text-indent: 30px"><p> (32, если убрать пробел перед 30) И по моему опыту, это не спасает.
text-indent можно прописать один раз в диве)

text-indent можно прописать один раз в диве)
о! я не знала. Как честный человек, думала свойства нужно прописывать тому тегу к которому оно применяется. XD
Но задам вопрос, даже два. Зачем делается красная строка? Зачем вообще форматируется текст? Чтобы он хорошо выглядел и удобней было его читать. А это получается форматирование ради форматирования. Но я не настаиваю, если кому-то экономия знаков важнее.

Notepad++, Sublime Text 2
А phpDesigner подойдёт? Я в нём css писала пару раз и он у меня стоит уже. ^___^

Но я не настаиваю, если кому-то экономия знаков важнее.
Вопрос в целесообразности. Все остальное - личная идеология.

А phpDesigner подойдёт? Я в нём css писала пару раз и он у меня стоит уже. ^___^
По сути да.

P.S. Я вот собирал однажды fb2 книжку таким вот образом. Никакой магии, сплошной XML.

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

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

Типографика и веб, ну как бы, отличаются. И это скорее список рекомендаций и правил хорошего тона, нежели "законы". А хрень получится, если люди не думают о комфорте читателей, а гонятся за непонятно-чем.

А хрень получится, если люди не думают о комфорте читателей, а гонятся за непонятно-чем.
Вот именно про это и говорю.

А хрень получится, если люди не думают о комфорте читателей, а гонятся за непонятно-чем.
Вот именно про это и говорю.

Значит мы друг друга поняли)

Как в хтмл есть законы, так и в типографике. И если их не соблюсти выйдет хрень.
Анонче, а какие законы ты считаешь наиболее важными в html? Помоги нубу сориентироваться

Анонче, а какие законы ты считаешь наиболее важными в html? Помоги нубу сориентироваться
Да я тоже не асс…
1. Закрывай теги. Иначе дайри закроет их сам как получится.
2. Закрывай теги там, где это нужно. Иначе отобразится опять как получится.
3. Следи чтобы все знаки были на месте.
Например не закроешь стиль кавычками <span style="padding-left: 30px"> не увидишь стилей.
Забудешь слэшь при закрытие тега <span ></span>. Будет у тебя не начало и конец, а 2 начала и дайри закроет их сам, а там см. п. 1.

Это собственно всё.))) Всё что я могу сказать ещё больше именно дизайна касается.

алсо, в дополнение к пункту 2 предыдущего: следите за правильной вложенностью тэгов. если они у вас открываются < i >< b >, то закрываться должны < /b >< /i >, а не наоборот.
самая жопа с версткой случается, если в тэге div вложенность нарушена.

<p>Текст</p><p>Текст</p>
а в чем принципиальная разница между отбивкой пробелов вручную и убиранием пробелов вручную? по-моему, еще больше времени займет
чайник

Уважаемый чайник, речь про красную строку и что выходит если её прописывать через параграф.

И если текст размечен не голыми переносами строки, а тегами типа p, li и так далее, надо не забывать ставить галочку "Не заменять переносы строки на br" <_<

И если текст размечен не голыми переносами строки, а тегами типа p, li и так далее, надо не забывать ставить галочку "Не заменять переносы строки на br" <_<
Тогда надо расставить br везде, где нужны переносы. Тоже тот ещё геморой.

И если текст размечен не голыми переносами строки, а тегами типа p, li и так далее, надо не забывать ставить галочку "Не заменять переносы строки на br" <_<
чтобы разбивать на абзацы в самом редакторе? нахрена?

Если переносы тегами делаются не во всём тексте, то достаточно просто не делать переносы между этими тегами... Правда, читать это возможно будет только в предпросмотре, но зато место в посте будет с экономлено и не придется автозамену гонять по двадцать раз.

Notepad++, Sublime Text 2 и учить регулярные выражения хотя бы в минимуме. Позволяет очень быстро делать автозамену не по конкретным словам, а по подходящим выражениям,

Анон, подскажи мануал, выучу. Полезная штука.

*ссыль на мануал

Какая полезная тема, и как здесь мало ответов. Дополню.

Дизайн.
1. Цветовая гамма - 2-3 цвета. Три - это максимум. Четыре и более - это уже "каша", которую мало кто умеет готовить.
2. Цвета сочетаемы. Как выбрать? Погуглите "цветовой круг" и цветовые схемы. Вот страничка для начала.
3. Шрифтов лучше поменьше. Если очень-очень нужно, то два. Максимум два. А лучше один и пользоваться курсивом, жирным курсивом и просто жирным выделением. И всё это в рамках _одного_ шрифта.
4. Цвета шрифта сочетаемы с остальным дизом!

Юзабилити оно же "удобство чтения"
5. Текст и фон должны быть контрастны, но не вырвиглазны! Например, на этом фоне лучше бы не полностью чёрный шрифт, а текст тёмно-графитового цвета
6. Выше написали: текст делать покрупнее. Дефолтный размер шрифта этого сообщества неудобный, он мелкий.
7. Наиболее удобными шрифтами для веб-контента считаются шрифты Tahoma и Verdana. Times New Roman лучше не использовать, он разрабатывался для печатных текстов.
8. Межстрочное расстояние изменить хорошо, но учитывайте, что это может не сработать. Дайри обрабатывают не весь HTML-арсенал. Лучше шрифт покрупнее сделать.
9. Не лепите текст впритык к картинкам и краям блоков. Должен быть отступ, "воздух".
10. Вообще "воздух" в дизайне крайне желателен, с ним легче читать и воспринимать информацию. Не бойтесь свободного места. читать дальше
11. МАСШТАБИРУЕМОСТЬ вашего макета! Помните об удобстве всех. Не надо думать, что с телефонов не читают - читают. И с недо-планшетиков читают. Минимальная ширина дизайна должна быть 500-550 пикселей. Посмотреть как видит дневники пользователь смартфона можно здесь; m.diary.ru/
12. Максимальная ширина блока с текстом лучше 800 px, если больше, то учитываете, что растаращенный по длинным строкам текст читается очень плохо. Думаете, для чего в газетах колонки?
13. Откажитесь от пёстрого фона. Вообще от фона неоднородного. даже если у вас что-то под древность, а диз имитирует побитый молью и временем пергаментный свиток - нафиг тот свиток. На пёстром фоне читать неудобно. То же самое к звёздам.

Удобство загрузки
14. Постарайтесь обойтись без PNG! Это очень "тяжёлый" формат, его использование не всегда оправдано. Вот честно, лучше заглушкам быть без тени, чем грузиться по 5 минут. Кроме того, не забывайте о мобильном интернете, многие с него ходят.
15. Форматы GIF и JPEG - ваше всё. Но не забывайте их оптимизировать. Для JPEG достаточно качества 55.
16. Сохраняйте ваши озуп-картинки в "прогрессивной развёртке". Это значит, что грузиться она будет "кубиками", чем больше загрузилось, тем мельче кубики и тем понятнее детали. НО - в любом случае, зрителю видно будет что здесь ВООБЩЕ грузится.
17. И если вы можете обойтись без графики - обойдитесь без неё.
18. Почитайте мануалы и научитесь работать с цветом фона через HTML и CSS. Это лучше, чем фон делать картинкой.
19. Верстать лучше блоками DIV, а не таблицами. При всей внешней аккуратности есть одна засада. Блоки в браузерах грузятся последовательно, от верха шаблона, к низу. Таблицу же браузеры отрисовывают всю и сразу. То есть ждут, пока загрузится вся графика, потом рисуют. Смекаете, как всё замедляется?

Вёрстка
20.Не надо строить навигацию по вашей выкладке только через картинки, обязательно пишите все "открыть" и названия разделов ТЕКСТОМ. Случись что с сервером, на котором лежат картинки или пользователю надо отключить в браузере показ графики, и всё, нету вашей выкладки, её не видно, в ней нельзя никуда зайти.
21. все картинки снабжайте довеском alt="пояснительный текст". Обязательно это делать если у вас картинка в качестве ссылки. Почему - см п. 19.
22. Повторяю DIV лучше TABLE, грузится быстрее, меньше возможностей запутаться.
23. Если вы новичок, не увлекайтесь всякими красивостями вроде закруглённых уголков, теней текста и боков, радиента и полупрозрачности. Усложните себе жизнь и утонете в коде.
24. Но если увлеклись, то погуглите префиксы и пропишите свою "свиристелку" для всех браузеров! Нет ничего печальнее шаблона, свёрстанного только для одного браузера и разпидорашенного в других. Да, Internet Explorer тоже учитывайте.
25. Подписывайте ваш код. К сожалению, дайри е сохраняют обычные для HTML комментарии, но я видела такой выход: в самое начало тега, перед style добавлять class="пару слов пояснения". Именно class, не ID.
26. Прежде чем взяться за вёрстку, нарисуйте макетную сетку. Просто возьмите лист бумаги и нарисуйте что и за чем у вас будет идти и как расположено относительно границ шаблона и соседних элементов.

Технический момент
27. НЕ верстайте в WORD!!! Это "чёрный ящик", пр переносе он может всякой левой фигни в код напихать. да-да, простой текст из ворда копипастой.
28. Пишите всё в обычном, банальном БЛОКНОТЕ. Сохраняйте код в TXT. Mo;yj и в Notepade++? поверьте, это очень удобная программа. Например тем, что там автоматом показывается иерархичность вложения - что во что вложено. Так легче отслеживать закрыли вы теги или нет. Для p, span, div это обязательно, иначе всё развалится.
29. Если вам в процессе нужно посмотреть, что получается (а смотреть надо как можно чаще, так легче отловить ошибку), то надо выгрузить ваш код в "новую запись", промотать
чуть вниз и нажать кнопку "просмотр". Следующей вкладкой откроются "Черновик", там вё увидите. Можно протестить)
30. НЕ ПРОВЕРЯЙТЕ в "визуальном редакторе"!!! Никогда! Особенно если у вас в дизайне всякте красивости вроде тенюшек и круглых уголков, и вы выполнили пункт 24.. Когда вы вернётесь в "HTML-редактор" вы увидите что исчезли все ваши прописанные префиксы и ещё всякую фигню в коде, которую вы туда точно не писали. Вообще отключите в настройках "визуальный редактор" на время вёрстки.

Ну, вроде всё. Вспомню ещё что-то, допишу.

Гость в 14.03, ого! Хороший мануал для начинающих! Ты монстр! Мне такого не хватало до жути, когда я только начинал)

озуп-картинки
jpeg-картинки
Punto Switcher - гад. Иногда

--------------------------------
Вспомнила:

19.1 Никогда, слышите, никогда не вставляйте текст в виде картинки! Большой текст, не заголовки.
Нет ничего печальнее визитки сплошь из графики. даже если у вас олупрозрачный фон, а "подложка" ах, красотень неимоверная, НЕ НАДО! Так же не надо пихать текст в виде графики ради нестандартности вёрстки, которую невозможно обеспечить связкой HTML+CSS. Поверьте, еёи не оценят, если вашаи графические простыни будут долго грузится и вынесут пользователья за лимит загрузки. Или у него просто медленный инет.
19.2 Пожалуйсте, не увлекайтесь флешем. Это красивая фича, но не нужно в ней давать важную информацию. Во-первых, это "тяжёлый" контент. во-вторых, бывает так, что плагин Adobe Flash Player конфликтует с браузером. Как думаете, какова вероятность, что рядовой читатель, увидев незнакомую выкладку, откроет другой браузер и загрузит вашу страничку туда? А ещё подумайте, каков процент тех, у кого на компе живут 2 и более браузеров - чтобы было что открыть. Крайне мало, и это сами верстальщики, для них это рабочая необходимость.
19.3 Тоже самое - с видео!
19.4 Всё важное - ТЕКСТОМ! Текстом, текстом и никакой графики!

Хороший мануал для начинающих! Ты монстр! Мне такого не хватало до жути, когда я только начинал)

Мне тоже. Поэтому и написала) Вдруг кому-то пригодится, да и у меня будет меньше поводов сидеть под фейспальмой.
ооо, незабвенные заглушки DMC по >2 MБ

ооо, незабвенные заглушки DMC по >2 MБ
Ой да... А у них, кстати, верстал прогер, что печально. Не думает никто о людях с медленным европейским инетом.