Наполнение сайта. Руководство

Наполнение сайта.
Руководство
h
Интерактивное
агентство

Контент-менеджеру
PR-специалисту
Маркетологу
Руководителю
Кому пригодится
Зачем нужно руководство В этом документе вы найдёте рекомендации по работе
с контентом. Знание базовых правил и инструментов
помогут вам самостоятельно наполнить сайт
необходимой информацией, быстро внести правки,
сохранив его стилистику.

01 Базовый набор тегов HTML
03 Подготовка изображений
05 Текстовая страница
02 Инструменты
06 Работа с CMS
04 Культура оформления
Содержание

Наполнение сайта Руководство www.nimax.ru
Чтобы информация на страницах сайта была удобна
для чтения и легко считывалась поисковыми
системами, при размещении контента используются
HTML-теги.
Грамотная разметка страницы помогает
пользователям ориентироваться в информации
и быстро совершать целевые действия.
01 Базовый набор
тегов HTML
1. Заголовки
2. Абзацы
3. Выделение текста
4. Индексы
5. Изображения
6. Таблицы
7. Списки
8. Ссылки

Основное правило
Только адекватные клиенты,
которые «в теме»
Существует шесть уровней заголовков:
<h1> — верхний уровень,
<h6> — нижний.
Для размещения заголовка второго уровня на странице,
достаточно в редакторе ввести:
1. Заголовки
<h2>Заголовок второго уровня</h2>
Веб-разработчики предусматривают стили до 4-го уровня
включительно, так как заголовки 5-го и 6-го уровня
используются редко. Необходимо обратить на это
внимание, чтобы не испортить стилистику сайта.
Заголовки h1-h3 — важный фактор ранжирования
для поисковых систем. Они привлекают больше
посетителей на страницу и помогают пользователям
ориентироваться
в контенте. На странице должен быть всего один заголовок
первого уровня.

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

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

Индексы часто указывают на страницах интернет-
магазинов, где используются единицы измерения, например,
кг/м2
.
Надстрочные и подстрочные знаки задают теги:
<sup> — верхний индекс,
<sub> — индекс нижний.
4. Индексы

Вставить иллюстрацию или фотографию поможет тег <img>.
Для каждого изображения задаётся размер и добавляется
описание. Размер позволяет выделить для изображения
определённую область на странице и при её загрузке
элементы не будут «скакать». Пользователь сможет
ознакомиться с материалом, не дожидаясь полной загрузки.
Текстовое описание необходимо для поисковых роботов
или для пользователей, которые отключили загрузку
изображений в браузере.
С помощью атрибутов тега задаются его свойства:
src. Путь до изображения на сервере.
width. Ширина изображения.
height. Высота изображения.
alt. Текстовое описание изображения (альтернативный
текст).
5. Изображения

Таблицы — хороший способ
организовать и структурировать
информацию.
6. Таблицы
Таблицы — это хороший способ организовать
и структурировать информацию. Чтобы вставить таблицу,
используйте теги:
<thead> — верхняя часть таблицы
<tbody> — основная
<tfoot> — нижняя
<tr> — это строка таблицы, а <td> — ячейка.
Полезно изучить, как с помощью HTML-тегов объединять
ячейки.

Списки могут быть двух типов — маркированные
и нумерованные. Создать список можно с помощью тегов
<ul>, <ol> и <li>.
7. Списки

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

Вставить ссылку поможет тег <а>.
<a href=”http://nimax.ru”>Сайт агентства Nimax</a>
Чтобы работать с разными типами ссылок, используют
дополнительные атрибуты:
rel — устанавливает отношение между текущим документом
и документ, на который ссылаются.
target — указывает, где открывать ссылку.
title — текст во всплывающей подсказке при наведении
на ссылку.
Внутренние ссылки — убираем доменное имя
Ссылки на внешние ресурсы выводим как есть
Пример. Для ссылки http://blog.nimax.ru/work/ в HTML в
атрибут href записываем /work/.
8. Ссылки
Пример. Записываем атрибут href в виде:
href=”skype:nimax-skype”
чтобы звонок осуществлялся по клику:
href=”skype:nimax-skype?call”
чтобы открывался чат:
href=”skype:nimax-skype?chat”
для телефонных номеров:
href=”tel:+78123092320”
для адресов электронной почты:
href=”mailto:sale@nimax.ru”
Ссылки на Skype и номера телефонов
Пример. Для ссылки https://example.com/example.html в
атрибут href вводим https://example.com/example.html

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

В предыдущих разделах были перечислены теги и атрибуты
HTML, которые чаще всего используют при работе с текстом
и изображениями.
Но не стоит ограничиваться только этими знаниями. Кроме
тегов HTML полезно изучить свойства и атрибуты CSS,
которые задают цвета, шрифты и расположение блоков.
Дополнительно
● Отступы: внутренние и внешние.
● Ширина и высота.
● Цвета.
● Кегль и интерлиньяж.
● Выравнивание текста.

Для работы с текстом, кодом и изображениями найдётся
бессчётное количество сервисов и программ. Мы составили
список инструментов, которые можно сразу применять
в работе — они бесплатны и не потребуют специальных
навыков и знаний.
02 Инструменты Notepad++ — текстовый редактор с подсветкой синтаксиса.
Поддерживает различные плагины, подойдёт опытным
пользователям.
Advego — сервис для проверки орфографии. Кроме того, Avergo
выполняет seo-анализ текста и проверяет его на уникальность.
Типограф «Студии Артемия Лебедева» Перед публикацией
тексты необходимо типографить: добавлять неразрывные пробелы
после предлогов, менять дефисы на тире (знаки «минус»), ставить
правильные кавычки и т.д. Всё это может сделать за вас
«Типограф».
Adobe Photoshop / GIMP / Paint.NET — эти инструменты
помогут создать или подготовить уже готовое изображение для
публикации: привести к одному размеру, подправить цвета и
сохранить в нужном формате.
Inkscape — удобный инструмент для быстрой правки векторных
изображений.

Для того чтобы картинки, иллюстрации, фотографии
корректно отображались на сайте и других устройствах,
все изображения необходимо предварительно
подготовить.
03 Подготовка
изображений
1. Выбор размера и формата
2. Сжатие

Для веб-станиц используют размер до 800px.
Если изображение векторное, не нужно его растировать.
При подготовке изображений следует обращать внимание
на формат: JPG или PNG (см. алгоритм справа).
1. Выбор размера и формата

Если используется Adobe Photoshop, сжатие изображения
выполняется по следующей схеме:
2. Сжатие
File → Save for Web, либо
Ctrl+Alt+Shift+S (Cmd+Alt+Shift+S)
Затем выбирается нужный формат и настраиваются
параметры.
Для сжатия изображений применяются разные
инструменты. Ознакомьтесь с подробным обзором по
каждому и выберите удобный для вас.

04 Культура
оформления
● В русском языке используются кавычки-ёлочки «...».
● Если внутри фразы с кавычками есть ещё одни кавычки, тогда
ставятся двойные кавычки-«лапки»: „…“.
● В конце каждого пункта маркированного или нумерованного
списка должен быть знак препинания. Он определяет с какой
буквы начнётся следующий пункт: в конце точка, значит — с
большой, в конце запятая, — с маленькой.
● При сокращении слов нужно руководствоваться правилами
русского языка. Для проверки можно пользоваться словарём
сокращений.
● Заполняя раздел «Контакты» на сайте, помните про написание
адресов и сокращений в них. Подробнее о них можно прочитать
здесь.
● К изображениям желательно также добавлять подпись. Если
в материале много изображений, то хорошо ссылаться на них в
тексте выше.
● Убедитесь, что буква «ё» везде написана верно.
● Нельзя путать дефис (-), тире (—) и знак минус (−).
Чтобы правильно и быстро вводить нужные знаки
на Windows и Mac OS X, пользуйтесь памяткой
от «РИА Новости».
Существуют единые правила оформления текста и его
элементов. Они применяются как в книжных изданиях,
так и в текстах на веб-страницах.
Все рекомендации и нормы по оформлению текста
собраны в «Справочнике издателя и автора» под редакцией
А.Э. Мильчина и Л.К. Чельцовой.
Мы перечислим только самые часто используемые
правила, которые необходимо учитывать при работе с
текстом.

05 Текстовая
страница
Стандартная текстовая страница представляет собой HTML-
страницу на которой собраны все, предусмотренные веб-
разработчиком, элементы для форматирования текста.
При вёрстке страниц, фронт-энд разработчик использует так
называемый reset.css, который сбрасывает стандартные
стили браузеров. Если используется reset.css и нет текстовой
страницы, то опубликованные вами материалы будут
выглядеть как сплошная «простыня» неформатированного
текста без отступов, списков и заголовков.
Страница с reset.css с учётом текстовой страницы (изображение
слева) и без учёта текстовой страницы (изображение справа).

Стандартная текстовая страница содержит:
05 Текстовая страница
Элементы
● заголовки различных уровней;
● текстовые абзацы;
● специально оформленные текстовые абзацы (например,
цитата);
● маркированные и нумерованные списки;
● таблицы;
● изображения (на всю ширину области, изображения,
обтекаемые текстом и изображения с подписями).

Наполнение сайта осуществляется с помощью CMS
(Content management system) — системы управления
содержимым.
Изучите, как работает CMS-система вашего сайта:
06 Работа с CMS
● «1C-Битрикс». Курсы контент-менеджера.
● HostCMS. Документация. Документация скорее
для программистов, но найти информацию
по наполнению также можно.
● CS-Cart. Ссылка на документацию и уроки по работе
с сайтом.
● Joomla. Документация.
● NetCat. Документация и уроки.
● UMI.CMS. Руководство пользователя.
● Drupal. База знаний от веб-разработчика.
Понять, как устроена CMS-система сайта помогает Руководство
пользователя. Это подробная инструкция по вашему сайту, которая
описывает содержание каждого информационного блока, все поля в
административной части сайта, необходимые для ввода или
редактирования данных.

Заключение
В этом руководстве мы охватили лишь основные
моменты, связанные с наполнением сайта, контентом и
его оформлением.
Уверены, что у вас ещё остались вопросы.
Мы с удовольствием поможем в них разобраться
и дополним руководство новыми полезными
разделами.
Подписывайтесь на нашу рассылку
и присылайте свои вопросы
на info@nimax.ru

Наполнение сайта. Руководство

More Related Content

What's hot

Viewers also liked

Similar to Наполнение сайта. Руководство

More from Nimax

Наполнение сайта. Руководство