Справочник Плакаты Лекторий Команда Вакансии Контакты
1 2 3 4 5 6 7 8 9 10
В чём смысл

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

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

Элементы страницы

Стандартная текстовая страница — это описание разметки на языке HTML. В ней элементы для форматирования текста.

Скорее всего, если нет текстовой страницы, то опубликованные материалы будут выглядеть как сплошная «простыня» неформатированного текста без отступов, списков и заголовков (при условии, что разработчик использовал reset.css).

В стандартную текстовую страницу входят:

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

Чтобы пользователи легко ориентировались в тексте, а поисковики верно считывали страницу, используют HTML-теги заголовков.

Заголовки

Предусмотрено шесть уровней: <h1> — верхний, <h6> — нижний. На практике редко используют уровни ниже четвертого.

Чтобы сделать заголовок второго уровня, введите в редакторе: <h2>Заголовок второго уровня</h2>

Заголовки <h1> , <h2>, <h3> — важный фактор ранжирования для поисковых систем. Убедитесь, что на странице только один заголовок первого уровня.

Абзац

Сквозь объёмные «полотна» текста пользователю трудно найти нужную информацию. Проанализируйте структуру, выделите логические части, распределите текст последовательно и делите его на абзацы, используя тег <p>.

Таблицы и списки
Таблицы

Организуют и структурируют информацию. Чтобы вставить таблицу, используйте теги:

  • <table> — тег таблицы,
  • <thead> — верхняя часть таблицы,
  • <tbody> — основная,
  • <tfoot> — нижняя,
  • <tr> — строка,
  • <td> — ячейка.

Полезно изучить, как с помощью HTML-тегов объединять ячейки.

Списки

Способ перечисления с элементами выделения двух видов: номерами и маркерами. Создайте список с помощью тегов <ul>, <ol> и <li>.

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

Индексы и ссылки
Индексы

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

Надстрочные и подстрочные знаки задают теги:

  • <sup> — верхний индекс,
  • <sub> — индекс нижний.
Ссылки

Фрагмент HTML-документа и его базовый элемент. Ссылку ставит тег <а>:

  • <a href=»http://nimax.ru»>Сайт агентства Nimax</a>

Чтобы работать с разными типами ссылок, задайте дополнительные атрибуты:

  • rel — устанавливает отношение между документами: текущим и тем, на который ссылаются;
  • target — указывает, где открывать ссылку;
  • title — текст подсказки, которая всплывает при наведении на ссылку.

Пример 1

Для ссылки http://blog.nimax.ru/work/ в HTML в атрибут href записываем /work/. Ссылки на внешние ресурсы выводим как есть.

Пример 2

Для ссылки https://example.com/example.html в атрибут href вводим https://example.com/example.html.

Ссылки на Skype и номера телефонов

Запишите атрибут в href:

  • href=»skype:nimax-skype»

Звонок по клику:

  • href=»skype:nimax-skype?call»

Открытие чата:

  • href=»skype:nimax-skype?chat»

Для телефонных номеров:

  • href=»tel:+78123092320″

Для адресов электронной почты:

  • href=»mailto:sale@nimax.ru»

Если ссылки ведут на хостинг YouTube, Vimeo, Slideshare, разместите контент на странице. Для этого нажмите на «Поделиться/Share/Embed» и скопируйте код HTML.

Подготовка и вставка изображений
Подготовка картинок
  1. Определите размер и формат. Не используйте большие изображения: приведите все изображения к одной ширине (~1 000 px).Используйте PNG, если нужен прозрачный фон либо если изображение содержит много текста. Во всех остальных случаях используйте JPG.

    Если это возможно, то не растрируйте иллюстрацию. Работайте с векторными иллюстрациями.

  2. Оптимизируйте изображение. Например, через Adobe PhotoshopFile → Save for Web или Ctrl+Alt+Shift+S (Cmd+Alt+Shift+S)Затем выберите нужный формат и настройте параметры.

    Для сжатия изображений применяют разные инструменты. Ознакомьтесь с подробным обзором по каждому и выберите удобный вариант.

Вставка картинок

Иллюстрацию или фотографию поставит тег <img>.

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

Задайте атрибуты тега <img>:

  • src — путь до изображения на сервере,
  • width — ширина изображения,
  • height — высота изображений,
  • alt — текстовое описание изображения (альтернативный текст).

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

Выделение текста

Контрастные фрагменты текста привлекают внимание читателя. Для выделения используют теги <strong>, <em> и <mark>. Не используйте устаревшие <b> и <i>. Думайте о семантике.

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

Оформление текста

Единые правила оформления текста и его элементов применяют как в книжных изданиях, так и в текстах веб-страниц.
Рекомендации и нормы по оформлению текста изучайте в «Справочнике издателя и автора» под редакцией А.Э. Мильчина и Л.К. Чельцовой. С основными элементами поможет памятка от «РИА Новости».

Основные правила:

  1. В русском языке используют кавычки-ёлочки «…».
  2. Если внутри фразы с кавычками есть ещё одни кавычки, тогда ставят двойные кавычки-«лапки»: „…”.
  3. В конце каждого пункта маркированного или нумерованного списка должен быть знак препинания. Он определяет, с какой буквы будет следующий пункт: если в конце точка, то с прописной, если запятая — строчной.
  4. К изображениям желательно добавлять подпись. Если в материале много изображений, то стоит ссылаться на них в тексте выше.
  5. Убедитесь, что буква «ё» написана верно.
  6. Не путайте дефис (-), тире (—) и знак минус (−).

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

  1. отступы внутренние и внешние;
  2. ширина и высота;
  3. цвета;
  4. кегль и интерлиньяж;
  5. выравнивание текста.
Инструменты

Сервисы и программы для работы с текстом, кодом и изображениями.

  1. Notepad++ — текстовый редактор с подсветкой синтаксиса. Поддерживает различные плагины, подойдёт опытным пользователям. Есть и другие отличные редакторы. Рекомендую изучить вот этот обзор.
  2. Advergo — сервис для проверки орфографии. Advergo выполняет SEO-анализ текста и проверяет его на уникальность.
  3. «Типограф» от «Студии Артемия Лебедева». Перед публикацией проверьте тексты: добавьте неразрывные пробелы после предлогов, поменяйте дефисы на тире, поставьте правильные кавычки. В этом поможет «Типограф». Есть и другие типографы: http://mdash.ru/ и http://typograf.ru/.
  4. Adobe Photoshop / GIMP / Paint.NET — инструменты помогут привести изображения к одному размеру, подправить цвета и сохранить в нужном формате.
  5. Inkscape — удобный инструмент для быстрой правки векторных изображений.
Изучение CMS

Сайт наполняют через CMS (Content management system) — систему управления содержимым. Научитесь работать в CMS-системе сайта:

  1. «1C-Битрикс». Курсы контент-менеджера.
  2. HostCMS. Документация. Документация скорее для программистов, но найти информацию по наполнению также можно.
  3. CS-Cart. Документация.
  4. Joomla. Документация.
  5. NetCat. Документация и уроки.
  6. UMI.CMS. Руководство пользователя.
  7. Drupal. База знаний от веб-разработчика.
Читайте также
Специализированные термины из собственной вики по брендингу
Ульяна Кожевникова
И как их избежать
Никита Михеенков
Иннокентий Нестеренко