вход  



Последние коментарии  

Облако тегов  

JCE - редактор для Joomla. Основные функции. - стр.2

E-mail
Оценка пользователей: / 6
ПлохоОтлично 
Оглавление
JCE - редактор для Joomla. Основные функции.
стр.2
Все страницы

 

 



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

Первым, и самым главным инструментом для работы с кодом, является «Edit Code»:

редактор joomla jce

При клике по этой кнопке открывается редактор html-кода с подсветкой:

редактор jce для joomla

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


Вторым инструментом, который, к сожалению, не входит в стандартный состав JCE, но многим будет крайне удобен, является JCE-плагин «RJ_InsertCode». Данный плагин позволяет вставлять в статью пример кода, оформленного в соответствии с языком, на котором он написан. Например, выше можно видеть, как отображает код плагин «Edit Code». Он красиво подсвечен и структурирован. Чтобы просто так вставить такой код в статью(под словом «вставить» я сейчас понимаю код, как текст, т.е. вставка не для исполнения кода, а для его показа пользователям) потребуется много усилий для работы со стилями. Плагин «RJ_InsertCode» применит все стили автоматически в соответствии с выбранным языком программирования(к которому относится код) и вставит его в красивом окошке с нумерацией строк. Выглядит это так:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table border="0">
  <tbody>
    <tr>
      <td></td>
      <td></td>
    </tr>
 
    <tr>
      <td></td>
      <td></td>
    </tr>
 </tbody>
</table>
<br />

Скачать плагин RJ_InsertCode можно тут.

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

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

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

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

jce

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

jce

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

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


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

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

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

jce

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

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

URL – путь к изображению. Заполняется автоматически при клике по файлу изображения;

Alternate Text – альтернативный текст. Будет показан вместо изображения у пользователей, которые отключили изображения в браузере. Кроме того, считается, что этот текст положительно влияет на поисковую оптимизацию статьи;

Dimensions – размер или разрешение изображения. Здесь вы можете задать размеры, которые будет иметь изображение в статье. Я советую вам выбрать для себя какую-то одну ширину всех изображений для сайта. Таким образом вы убьете сразу двух зайцев. Во-первых, вам не нужно будет беспокоится о том, что новое изображение может нарушить верстку сайта и вылезти за пределы экрана. Достаточно протестировать сайт с каким-то одним размером изображения, а в дальнейшем применять его ко всем новым, а во-вторых, когда все изображения одинаковой ширины, статьи выглядят гораздо аккуратнее. Кроме того, поставив галочку «Proportional» высота вашего изображения изменится автоматически, не нарушая его пропорции.

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

Margin – отступ изображения от текста. Задается со всех четырех сторон. Если установлена галочка «Equal Values», достаточно задать только один отступ. Остальные три автоматически будут заполнены тем же самым значением.

Граница – здесь определяется все, что связанно с границей изображения.

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

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

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

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

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

На этом пока все! Компонент JCE 1.5.7. можно скачать здесь.



Вам необходимо зарегистрироваться что бы оставить коментарий!

© 2017 - sitizona.ru
   
| Пятница, 24. Ноябрь 2017