Советы бывалого верстальщика

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

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

Несколько советов по оформлению текстов

  1. Заголовок выделяется специальным стилем, в конце заголовков точка никогда не ставится.
  2. Общий стиль оформления статьи должен выдерживаться в одном русле. Выбираем шрифт только одного вида (можно разных размеров и толщины). Используем уже встроенные в шаблон стили.
  3. Общий стиль ещё означает, что если начали набирать абзацы без отступа первой строки, то и все абзацы лучше делать без отступа. И наоборот, все с отступом («красная строка»). Но тогда отступ должен быть одинаковый у всех абзацев.
  4. Красивее смотрится текст, выравненный «по ширине», т.е. ровный край и слева, и справа, а не просто «по левому краю».
  5. Есть такая фишка у верстальщиков: различие между концом абзаца (нажимаем «Enter») и концом строки (когда нужно текст перенести на следующую строку, а абзац при этом не должен закончиться). Выполняется это при помощи дополнительного нажатия кнопки «Shift+Enter». Разница результата заключается в том, что в первом случае между абзацами есть разрыв (заданный стилем абзаца), а во втором его нет, но нужное слово переносится на следующую строку. Правда это хорошо работает (красиво, на сайтах) только когда текст выравнивается «по левому краю».
  6. Для приятного и удобного чтения текста количество строк в одном абзаце не должно быть больше 5-7 и ещё: переносите предлоги на следующую строку вместе со словом, к которому они относятся. В этом случае может пригодиться п. 5.
  7. Стихи принято всегда выравнивать «по левому краю», а не «по центру». Можно для отдельных четверостиший сделать общий отступ (пример).
  8. Не должно быть больше одного пробела между словами — иначе очень некрасиво.
  9. Чтобы выделить нужное количество текста при его корректировке (бывает неудобно вести мышкой долго по большому тексту), ставим курсор в начало нужного фрагмента, затем нажимаем клавиши «Shift+Ctrl» и удерживая их ставим курсор в конец нужного фрагмента текста.
  10. Используем клавиши «Ctrl+C» для копирования выделенного фрагмента текста в буфер, клавиши «Ctrl+X» для удаления выделенного фрагмента, клавиши «Ctrl+V» для вставки скопированного текста из буфера в нужное место — туда, где поставлен курсор.

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

Как лучше вставить картинку или фото

  1. Сайт — это фактически книга, где всё должно быть подчинено одной мысли и теме. Гармония эта предполагает однообразие оформления и всех страниц. Всего должно быть достаточно: и текста, и картинок. Лишнее уже ни к чему, перебор — он и в Африке перебор, как говорится. 🙂 Придерживайтесь выбранного однажды стиля во всём — будет стильно.
  2. Картинка вставляется удобнее уже в готовый текст. Подготавливаем место для картинки — делаем, при необходимости, отдельный абзац, ставим курсор и загружаем файл. При необходимости корректировки размера картинки и её расположения в тексте используется встроенный в wordpress специальный редактор (нажимаете на вставленную картинку, появляются две кнопочки: «редактировать» и «удалить изображение»).
  3. Когда картинка иллюстрирует какой-то абзац, её можно давать в уменьшенном виде (достаточно того, чтобы всё на ней легко прочитывалось) слева или справа, рядом с тем текстом, который она иллюстрирует. Важно учесть: картинку, вставленную в один абзац с текстом, необходимо отделить промежутком. Он задается в дополнительных настройках в редакторе картинки — «Отступ(Н)».
  4. Когда картинка, дополняя информацию статьи, выступает в роли отдельного «текста», лучше её давать отдельным от текста абзацем, по середине и ровно на всю ширину странички.
  5. Если это фото-галерея, лучше все фото сделать одного размера, по центру, через интервал (дополнительный пустой абзац) или через пару пробелов (чтобы не сливались), если картинки маленькие и расположены на одной строке.
  6. Когда картинки вставлены, но их названия отдельно нигде не приводятся, в редакторе можно задать ещё заголовки каждому фото — тогда они будут всплывать в итоге при наведении читателем курсора на фото.
  7. Все предыдущие советы по оформлению текстов (например, пункты 9 и 10) работают и для абзаца с фото.

Если возникли ещё какие-то вопросы, задавайте в комментариях — обязательно отвечу и дополню перечень советов.

7 комментариев на эту запись



» Надежда сказал: { Июн 9, 2013 - 01:06:41 }

Татьяна спасибо Вам за ценную информацию — она мне очень пригодилась!..Постараюсь сегодня исправить все ошибки на своем сайте!
Ещё раз спасибо.
Надежда recently posted…Что мы пьем.My Profile

» Татьяна сказал: { Июн 9, 2013 - 01:06:38 }

Всегда рада помочь — задавайте вопросы еще, чем смогу — помогу, ой сколько я еще могу 🙂

» Надежда сказал: { Июн 9, 2013 - 02:06:52 }

Татьяна, у меня к Вам один маленький вопросик: картинки и фотографии как лучше смотрятся? посередине или с какого-то края? Имеет ли значение размер фотографии и должен ли он быть одинаковым для всех в разных рубриках?
Надежда recently posted…Что мы пьем.My Profile

» Татьяна сказал: { Июн 9, 2013 - 02:06:06 }

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

» Татьяна сказал: { Июн 9, 2013 - 03:06:17 }

Благодаря заданному Надеждой вопросу добавила еще информации. Спасибо за вопрос, Надежда!
Татьяна recently posted…Международный день друзей — 9 июняMy Profile

» Надежда сказал: { Июн 11, 2013 - 12:06:27 }

Спасибо Вам за четкий ответ, Татьяна! пока все понятно! 🙂
Надежда recently posted…Что мы пьемMy Profile

» Татьяна сказал: { Июн 11, 2013 - 01:06:04 }

Всегда рада помочь


Оставить комментарий

CommentLuv badge