Skip to main content

Мастерская DimONE

Создание сайтов любой сложности.
От Лендинга до Интернет-Магазина.

Создание сайтов любой сложности. От Лендинга до Интернет-Магазина.

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

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

Именно для такой категории клиентов у нас небольшой подарок.

Для создания сайтов мы используем CMS Joomla, самую оптимальную и универсальную, на наш взгляд, платформу. Joomla позволяет при определённой сноровке реализовать проект практически любой сложности и направленности. Соответственно для редактирования материалов и текстов страниц на создаваемых нами сайтах мы выбрали самый лучший визуальный редактор, а именно компонент "Редактор JCE", который Вы можете найти, перейдя в меню "Компоненты" в панели управления Вашего сайта .

Но поскольку основная часть наших заказчиков не настолько хорошо осведомлены в тонкостях и подробностях работы с этим изумительным инструментом, мы позаботились о Вас и предлагаем прочитать небольшую обучающую статью, любезно предоставленную автором Виталием на сайте блога Wedal.ru.

Надеемся, что это облегчит Вам работу с Вашим сайтом.

 

Знакомство.

Как известно, Joomla – это система управления контентом. «Контент» в этом определении ключевое слово. Именно на контенте держится весь Интернет. Если для кого-то это слово незнакомо, уточню: контент – это информация в любом ее представлении. Читаете вы сейчас контент, новости и фильмы по ТВ – контент, музыка, смс, да и речь человека тоже контент. Для Интернета, конечно, характерны только некоторые виды контента, но их значение огромно.

Но вернемся к теме статьи. Контентом нужно не только управлять (что предлагают делать нам все CMS-системы), но также его нужно создавать и оформлять. Думаю, гораздо приятнее читать текст, если он написан в едином стиле, а еще лучше стандартизован. Кроме того, вставка в текст изображений при использовании на сайте – довольно специфическая задача. А кроме изображений есть ведь и многое другое.

Сегодняшняя статья посвящена визуальному редактору для Joomla – JCE. В ней вы познакомитесь с этим замечательным редактором, узнаете, чем он лучше стандартного TinyMCE, а также на что он способен.

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

Данная статья посвящена как новичкам, так и продвинутым пользователям Joomla, для которых важно работать над материалами сайта качественно.

Введение.

Так что же такое JCE? Для начала разберемся с аббревиатурой. JCE это сокращение от «Joomla Content Editor», выражения, переводящегося, как редактор содержимого (контента) Joomla.

Да, кстати, давайте договоримся, что далее я буду применять только слово «контент». Некоторые считают, что его нужно переводить, т.к. изначально оно английское, но мне кажется, что данное слово уже настолько устоялось в среде web-мастеров, что переводить его не имеет смысла. Для меня оно уже практически русское.

JCE – это визуальный редактор для Joomla. Большинству должно быть понятно, но, возможно, не всем, так что уточню. Главный вопрос здесь может быть связан со словом «визуальный». А какие бывают еще, «не визуальные»?

Основным отличием редакторов Joomla (и прочих CMS) от десктопных (например, Word’а) является исходное представление данных. Если Word представляет данные в виде текста с символами форматирования, то JCE представляет их в HTML-коде. Именно HTML является языком Интернета и никакие символы форматирования Word’a здесь не пройдут. Но поскольку HTML знают далеко не все, а работать как-то надо, были придуманы визуальные редакторы, такие, которые имеют инструменты форматирования текста и автоматически преобразуют его в HTML-код. Т.е. пишем статью, как в Word’е, а при просмотре исходного кода видим HTML. JCE, как впрочем и стандартный TinyMCE относятся к таким редакторам.

Почему JCE, а не TinyMCE?

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

 

TinyMCE2

 

Вот несколько самых сладких плюшек JCE:

  • Вставка текста из Word’а c сохранением стилей и форматирования;
  • Удобная загрузка и вставка изображений в контент с возможностью указания размеров;
  • Использование красивых эффектов при увеличении изображения;
  • Автоматическое создание HTML-таблиц при вставки из Word’a (те, кому доводилось добавлять на сайт табличные данный поймут на сколько это замечательная функция);
  • Возможность создать свой редактор для каждой группы безопасности Joomla (группы пользователей) с выделением отдельной папки для файлов и изображений каждому пользователю (редактор настраивается буквально до кнопки);
  • Просмотр HTML-кода одной кнопкой;
  • Расширяемость с помощью дополнительных плагинов.

Недостатки JCE.

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

Напоследок хочу дать один важный совет: никогда не пишите большие статьи в визуальных редакторах. Какими бы хорошими они не были, вероятность потери информации, написанной в них, значительно выше, чем при использовании старого доброго Word’a. Просто представьте: вы пишите в визуальном редакторе статью, пишите долго, часа 2. Когда статья готова, вы откидываетесь на спинку стула и любуетесь результатом своей работы. Все, что остается, это сохранить и опубликовать статью. Вы жмете кнопку «сохранить» и вдруг оказывается что:

  • Интернет не работает;
  • Истекло время сессии пользователя;
  • Произошел сбой в работе редактора;
  • Произошел сбой в работе браузера(что маловероятно, но все-таки возможно);
  • И.т.д.

Кто-то может сказать, что эти причины встречаются редко, но, согласитесь, встречаются.

В итоге вся ваша работа улетучивается. Минимум, что при этом обеспеченно – плохое настроение на весь день. Так что я советую всегда работать в десктопном редакторе, будь то Word или что-то еще. На сегодняшний день они гораздо надежнее, а перенос данных в редактор JCE займет у вас всего несколько секунд (если не говорить про изображения).

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

 

Основные инструменты.

При работе с сайтом есть специфические моменты, с которыми можно работать только в редакторе Joomla. В этой статье я расскажу про основные инструменты JCE по работе с текстом и изображениями.
Хочу заметить, что JCE содержит гораздо больше инструментов, чем я описал ниже, но рассказывать о простейших функциях, знакомых из Word’а, я не считаю нужным. В статье рассказывается только про уникальные для работы с html-редактором инструменты.

JCE. Инструменты для работы с текстом.

Начнем с инструментов для работы с текстом. Предполагается, что исходный текст у нас уже готов и написан в Word’e. Прежде всего нужно запомнить, что простым копированием переносить текст из Word’a в JCE нельзя! Это связанно с тем, что Word вносит в текст собственное, уникальное форматирование, которое, при простом копировании в JCE, вызовет хаос. Так как же тогда переносить текст? С этим вопросом мы подходим к первому инструменту JCE – «Вставка текста».

В редакторе этот инструмент выглядит следующим образом:

 

1 fit 500x172

 

При клике по кнопке выпадает подменю, содержащие две опции:

  • Paste – используется для вставки текста из Word’а и других редакторов. Вид редактора определяется автоматически. (В предыдущих версиях JCE кнопок вставки текста было несколько – для каждого из распространенных редакторов).
  • Paste as plain text – вставка в виде плоского текста. При использовании этой опции все символы форматирования будут удалены при вставке, т.е. получится просто сплошной текст, что-то вроде вставки в блокнот.

После выбора опции откроется окно, как на рисунке:

 

2

 

В это окно мы вставляем наш текст из Word’а и жмем кнопку «Insert».

После этого текст с максимальным сохранением форматирования будет вставлен в JCE.

Следующим важным инструментом является выпадающий список с текстом «Paragraph»:

 

3 fit 500x157

 

Важен он потому, что позволяет обрамлять нужные части текста нужными тэгами. Это, как считается, важно для SEO-оптимизации сайта. Из важных опций здесь:

  • Paragraph – текст, к которому применена эта опция, обрамляется тегами, что означает, что текст относится к текущему параграфу. Подобными тегами автоматически обрамляются все параграфы текста, вставленного из Word.
  • Div – текст, к которому применена эта опция, помещается в контейнер Div. Применений у этой опции много, но людям, не знакомым с html и css, можно не обращать на нее внимания.
  • Heading – текст, к которому применена эта опция, обрамляется тегами h1, h2, h3 и.т.д. Это означает, что данный текст является заголовком. Для поисковой оптимизации текста, все его заголовки и подзаголовки рекомендуют помещать в теги h.

Последним, крайне важным инструментом, являются таблицы. К счастью, JCE текущей версии уже умеет переносить таблицы из word’а автоматически, создавая при этом весь необходимый код. Функция эта, по истине замечательная. Кто уже имеет опыт работы с html-редакторами, прекрасно понимает почему. Для остальных расскажу. Раньше, когда этой функции не было, редактор не умел автоматически создавать таблицы и вместо них вставлялся просто текст ячеек. Т.е. для вставки таблицы приходилось создавать ее вручную, а затем заново заполнять данными. И хорошо, если таблица небольшая, но ведь она могла содержать и сотню строк. Тогда работа превращалась в ужас. Никому не хотелось создавать таблицы в html-редакторе вручную. При этом стали придумываться некоторые способы полуавтоматизации. Например, был способ с копированием таблицы из word’а в Excel с хитрым преобразованием ее в html-код. Сегодня, слава Богу, все эти хитрости уже не нужны. Процесс автоматизирован. Но иногда может быть удобно создать небольшую табличку прямо в html-редакторе, так что ниже рассмотрим инструмент для создания таблиц.

Создать таблицу можно с помощью кнопки «Inserts a new table»:

 

4 fit 500x155 

При клике по ней открывается следующее окно:

 

5

 

Здесь мы можем установить следующие опции таблицы:

Вкладка «General»:

  • Cols – количество столбцов таблицы
  • Rows – количество строк таблицы

Стоит заметить, что таблицу в html можно строить только однотипную. Т.е. количество ячеек в каждой строке будет одинаково. Если вам нужно, чтобы в первой строке было, например, 2 ячейки, а во второй – 3, то сначала нужно создать таблицу 2х2, а потом, во второй строке, в одну из ячеек вставить таблицу 1х2 (1 строка, 2 столбца). Не очень удобно, но ничего не поделать. Таков язык html для таблиц.

  • Cellpadding – расстояние от границы ячейки до ее содержимого
  • Cellspacing – расстояние между ячейками таблицы

Опции Cellpadding и Cellspacing для таблиц аналогичны опциям margin и padding для div’ов.

  • Alignment – определяет выравнивание содержимого таблицы(по левому краю, по центру, по правому краю)
  • Border – ширина рамки таблицы
  • Width – ширина таблицы
  • Height – высота таблицы
  • Class – CSS-класс, применяемый к таблице
  • Table caption – место для заголовка таблицы. Если галочка установлена, над таблицей будет создана дополнительная строка, состоящая из одной ячейки, в которой предполагается размещение заголовка таблицы

Вкладка «Advanced» (в этой вкладке все опции не знакомы мне самому, поэтому опишу только основные):

  • Id – уникальный идентификатор таблицы. Применяется в CSS;
  • Style – CSS-стиль таблицы, заданный прямо в ее коде;
  • Background image – изображение, которое будет использовано в качестве фона таблицы;
  • Border color – цвет рамки таблицы;
  • Background color – цвет фона таблицы.

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

JCE. Инструменты для работы с изображениями.

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

Начнем с того, что в отличие от Word’a, в JCE, как впрочем и в любой другой html-редактор, нельзя просто так вставить изображение. Перед вставкой оно должно быть загружено на сервер в одну из папок Joomla. Это правило. Если его нарушить, изображение не будет показано. Конечно, соединяться с сайтом по FTP каждый раз, когда нужно вставить на сайт картинку, крайне неудобно. К счастью в JCE есть возможность этого не делать. Рассмотрим ее ниже.

Вставка изображений в JCE вызывается кнопкой «Insert/Edit Image», либо кликом правой кнопкой мыши по месту вставки изображения и выбором «Insert/Edit Image»:

 

9 fit 500x161

 

 

 При клике открывается следующее окно:

 

10 fit 500x435

 

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

Прежде всего изображения нужно загрузить на сервер и «разложить по полочкам». В нижней части окна мы видим некоторое подобие файлового менеджера, в котором содержится файловая структура и файлы папки «images» Joomla. Для редактора изображений JCE эта папка является корневой, но можно выбрать и другую корневую папку, задав ее в настройках JCE. Справа есть 3 кнопки:

 

11 fit 500x435

 

 

Благодаря им мы можем создавать подпапки и загружать изображения на сайт без использования FTP.

Для загрузки изображений нажимаем кнопку «Загрузить», при этом открывается следующее окно:

 

12 fit 500x435

 

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

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

За один раз можно вставить только одно изображение. Если необходимо вставить сразу несколько изображений, следующих друг за другом, возможно, удобнее будет вставить одно, а затем, перейдя в просмотр html-кода, скопировать его код, вставить его и изменить имена файлов.

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

 

13 fit 500x435

 

Теперь рассмотрим остальные опции:

Вкладка «Изображение»:

  • URL – путь к изображению. Заполняется автоматически при клике по файлу изображения;
  • Alternate Text – альтернативный текст. Будет показан вместо изображения у пользователей, которые отключили изображения в браузере. Кроме того, считается, что этот текст положительно влияет на поисковую оптимизацию статьи;
  • Dimensions – размер или разрешение изображения. Здесь вы можете задать размеры, которые будет иметь изображение в статье. Я советую вам выбрать для себя какую-то одну ширину всех изображений для сайта. Таким образом вы убьете сразу двух зайцев. Во-первых, вам не нужно будет беспокоится о том, что новое изображение может нарушить верстку сайта и вылезти за пределы экрана. Достаточно протестировать сайт с каким-то одним размером изображения, а в дальнейшем применять его ко всем новым, а во-вторых, когда все изображения одинаковой ширины, статьи выглядят гораздо аккуратнее. Кроме того, поставив галочку «Proportional» высота вашего изображения изменится автоматически, не нарушая его пропорции.
  • Выравнивание – данную опцию лично я использую только тогда, когда требуется сделать обтекание изображения текстом. Как например картинка в самом начале статьи. Выравнивание изображения относительно страницы проще делать точно также, как и выравнивание текста – специальными кнопками редактора.
  • Margin – отступ изображения от текста. Задается со всех четырех сторон. Если установлена галочка «Equal Values», достаточно задать только один отступ. Остальные три автоматически будут заполнены тем же самым значением.
  • Граница – здесь определяется все, что связанно с границей изображения.

Вкладка «Rollover» (интересная вкладка, опции которой я хоть и понимаю как работают, но совершенно не представляю, для чего это может понадобиться):

Прежде всего, для активации нужно установить галочку в опции «Разрешить».

  • Mouseover – путь к изображению, которое будет показано вместо текущего(выбранного во вкладке «Изображение»), при наведении на него курсора мыши.
  • Mouseout – путь к изображению, которое будет показано при ВЫведении с него курсора мыши. Здесь нужно указывать путь первоначального изображения(выбранного во вкладке «Изображение»)

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

Ну вот и все. С изображениями закончили. Как нет? Не закончили? Да, знаю, у всех остался еще один, самый главный вопрос. Как сделать, чтобы изображение плавно увеличивалось при клике по нему? Вопрос, действительно, хороший. И ответ будет дан.

 

Методы создания всплывающих изображений.

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

Для начала небольшое вступление. Способов создания всплывающих изображений существует несколько. В сущности, способ только один – javascript. Но нас, в первую очередь, интересует удобство создания этих изображений. Да, можно подключить к шаблону скрипт и затем в коде к каждой картинке добавлять определенный тег. Все будет работать, но это неудобно, т.к. даже в одной статье изображений может быть достаточно много. Ниже я приведу несколько методов создания всплывающих изображений с помощью JCE.

Ручное создание всплывающих изображений.

Начнем с некоторых базовых вещей, которые нужно понимать для того, чтобы создавать всплывающие изображения. Всплывающее изображение – это как бы два изображения в одном: превью(маленькая картинка) и полноразмерная картинка. При чем вторая появляется только после клика по первой. С точки зрения html-кода обычное изображение будет выглядеть так:

 <img src="/images/stories/key.jpg" width="150" height="112" />

Здесь подразумевается, что изображение уменьшенное, т.к. жестко заданы требуемые размеры. Еще раз: само изображение имеет размеры, скажем, 300х224px, но т.к. в коде задана ширина и высота, на странице оно будет отображаться в размере 150х112px.

А вот как будет выглядеть всплывающее изображение:

<a href="/images/stories/key.jpg" rel="lightbox"> <img src="/images/stories/key.jpg " width="150" height="112" /> </a>

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

Зная это можно переходить к описанию первого способа. Заключается он в том, что коды изображений в виде, примерно таком, как описано выше, добавляются прямо в основной код. Естественно, сначала нужно подключить к основному шаблону Joomla скрипт, который будет увеличивать изображения и узнать атрибут, который будет указывать скрипту на необходимость увеличения. О том, как подключается скрипт, а также об атрибуте обычно написано в документации к скрипту. Хотя все это имеет мало отношения к JCE. Да и удобство такого способа оставляет желать лучшего.

Создание всплывающих изображений с помощью плагина JCE Mediabox.

Этот метод удобнее предыдущего, но также требует совершения лишних действий. Плагин JCE Mediabox является бесплатным и может быть скачан с оф. сайта разработчиков JCE. Устанавливается плагин через менеджер расширений Joomla и после установки должен быть активирован.

Работает JCE Mediabox так:

Открываем менеджер изображений JCE и добавляем на страницу изображение, которое будет служить превью (мини-изображением). Подробно про добавление изображений я писал в предыдущей главе.
Выделяем добавленное изображение и кликаем по инструменту добавления гиперссылки.
Далее, используя браузер файлов JCE указываем путь к изображению, которое будет появляться после клика по превью.
Тут же открываем вкладку «Дополнительно» и в опции «Список классов» выбираем «jcepopup»

 

1 fit 500x503

 

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

 

 6 советов по правильному оформлению материалов Joomla с помощью редактора JCE.

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

Что плохого в неправильном оформлении текстов.

Когда возникает необходимость добавить текст на сайт, люди, не искушенные веб-технологиями, обычно действуют по следующей схеме:

  1. Написать статью в MS Word или заказать на бирже, получив примерно в таком же формате. Обычно написание сопровождаете копированием некоторых отдельных предложений с разных сайтов в Интернете.
  2. Скопировать статью из MS Word и вставить ее в редактор при создании материала Joomla.
  3. Вставить изображения, если это необходимо.
  4. Подправить статью и сохранить.

Казалось бы, все правильно. И на сайте статья отображается более-менее корректно. Так что же не так? Я вам покажу.

Возьмем цитату:

“Кролики это не только ценный мех но и 3 4 килограмма диетического легко усваиваемого мяса”

Скопируем ее из Word’а и вставим в стандартный редактор Joomla TinyMCE. Вот такой код мы должны получить в идеале:

 

1

 

А вот то, что выдаст нам TinyMCE в реальности:

 

2

 

Мне страшно. И это с учетом того, что речь идет об одной единственной фразе, к которой не применены разношёрстные Word’овские стили.

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

  1. Первое и главное – самое разное стилевое оформление в каждом из материалов Joomla. Один материал может быть написан шрифтом Times New Roman 11 размера, другой – Calibri 10 размера. Когда мы просматриваем полный текст статьи, это не особенно ощущается, но стоит увидеть эти статьи на странице блога рядом друг с другом – разница становится очевидной.
  2. В материалах при вставке к каждому абзацу текста, а иногда даже к каждому предложению добавляется атрибут style с собственными уникальными стилями оформления, что неправильно с точки зрения html-разметки.
  3. Если стилевое оформление чистых от style материалов редактируется в CSS всего парой строк кода для всего сайта, то приоритет style выше css, что приводит к необходимости редактирования каждого отдельного материала в случае, когда необходимо, например, увеличить размер шрифта текстов.
  4. Размеры каждой отдельной статьи в базе данных сильно увеличиваются. Это не играет роли в случае, если на сайте мало материалов, но может заметно раздуть базу данных, когда материалов тысячи.
  5. Некорректный перенос из Word’а подзаголовков материалов. Редко кто оформляет в Word подзаголовки материалов правильно. Обычно мы просто увеличиваем текст подзаголовка или делаем его жирным. Ни один скрипт переноса не поймет того, что это подзаголовок, а, следовательно, вставит его в редактор Joomla хоть и большим жирным текстом, но с использованием html-тега простого абзаца, но не тегов h2-h6, которые крайне важны для поисковых систем.

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

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

  1. Установите, настройте и включите по умолчанию сторонний текстовый редактор для Joomla – JCE.
  2. Никогда не вставляйте тексты из блокнота Windows. В блокноте есть только перенос строк, но нет абзацев. Это приводит к неверному формированию кода при вставке в редактор Joomla.
  3. После каждой вставки текста в редактор, нажимайте кнопку «< >», которая показывает html-код, и проверяйте, что в коде нет атрибутов style. Звучит сложно, но на самом деле, это вопрос 3 секунд.
  4. После вставки текста в редактор выделяйте заголовки и добавляйте для них соответствующий тип оформления (h1 – не используем, поскольку это заголовок материала, h2 – заголовки второго уровня, h3 – заголовки третьего уровня, и т.д.);
  5. Задавайте для изображений только относительную ширину и высоту (в идеале: ширина 100%, высота: не задана), либо не задавайте ее вовсе. В противном случае, вы рискуете получить проблемы при добавлении сайту адаптивности под мобильные устройства. Да, знаю, на wedal.ru сделано как раз-таки неправильно =).

  6. Используйте при оформлении маркированных списков кнопки в редакторе.

 

3

 


 

4 

Списки при вставке будут генерироваться автоматически при условии их правильного создания в Word.

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

 

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

 

По материалам блога: http://wedal.ru/

 

Наверх