Форма новостей - оформление текста

Форма новостей - модуль новости
Форма новостей - оформление текста
Форма новостей - расположение изображений

В предыдущей статье, я рассматривал пример создания наиболее удобного каркаса для модуля новости. Я продолжаю разговор о данном модули, где я хочу поговорить об оформление текста.

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

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

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

- можно нажать в своём браузере например в Firefox 4 Ctril+ и увеличить всю страницу, вместе с текстом, но из-за неправильной вёрстки, дизайн может поехать куда-то в торону, а ещё хуже перегородить блоком div, контент.

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

поэтому если есть возможность решить проблему благодаря html-css ей следует воспользоваться, а не откладывать в сторону.

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

Это вторая самая главная ошибка, после которой пользователь даже не будет читать такой текст, так как никто не хочет напрягать свои глаза и вчитываться в подобный текст, возьмите любую книгу с полки, посмотрите на уважающие себя сайты, вы увидите, что основной текст выполнен одним цветом, вы можете выделить разными цветами лишь очень важную информацию, например Внимание, адрес, телефон и т.д.

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

Всегда выделяйте заголовок, не оставляйте его стандартным, его можно сделать жирным или заменить на другой цвет,а также увеличить размер шрифта, в заголовке нельзя делать шрифт меньше основного, заголовок должен притягивать взгляд пользователя и разделять текст между собой.

Не стоит создавать радугу в заголовках, остановитесь на одном варианте, например тёмно зеленом или синем заголовке, старайтесь, чтобы цвет заголовка не совпадал с цветом ваших ссылок, пользователь просто будет путаться между ссылками и обычными заголовками, согласитесь не очень приятный момент.

Аналогичная ситуация и с нумерацией, если вы в тексте перечисляете по-пунктам ту или иную информацию, то выделяйте эти пункты, (1,2,3, во-первых, во-вторых, в-третьих,) жирным шрифтом или другим цветом.

Старайтесь выделять цитаты, так чтобы пользователь их видел, не оставляйте их по середине контента без выделения, даже серый фон или линия, смогут вам в этом помочь.

Если вы хотите выделить то или иное слово в тексте, то выделите его другим цветом (но не цветом который совпадает с цветом ссылок) или используйте тег <em> который будет отвечать за небольшое наклонение текста, но не используйте тег <u>, который отвечает за подчеркивание текста, так как пользователь может спутать данное выделение текста с ссылкой, согласитесь не очень хороший момент, если учесть то, что многие блоги выделяют ссылки в блоге не цветом, а именно подчеркиванием.

Всё очень просто, мы создаём основной контейнер div, которому прописываем css стили, давайте посмотрим на пример:

самое главное - это css стили, в которых мы:

- выравниваем текст (text-align:justify;)
- устанавливаем размер шрифта (115%)
- размер между строками (1.5)
- обозначаем последовательность шрифтов (Verdana,Arial,Helvetica)

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

всё просто как дважды два, в текст мы помещаем тег <p>, у данного решения существует одна загвоздка, а именно размер между абзацами может не соответствовать вашим задумкам или вы хотите установить определённый размер , для этого мы прописываем основной ячейки новостей, css стили, давайте взглянем например:

как вы понимаете мы прижимает информацию в теге <p> кверху основного контейнера и прописываем нижний отступ в 10 пикселей:

Для этого в системе uCoz существуют специальные теги:

Но как мы видим у данных тегов нету класса, как мы сможем прописать css стили, всё очень просто, открываем исходный код вашей страницы, ищем цитату и смотрим, какой класс или ид, установлен у данных тегов и меняем их на своё усмотрение в css стилях:

На этом я закончу...