Визуальный редактор материалов
Да, когда-то давно я тоже почему-то принципиально открывала сразу панель HTML-кодов и начинала писать теги. Но сейчас мне слишком ценно своё время, да и технологии шагнули вперед, поэтому сегодня я расскажу вам о Визуальном редакторе материалов, встроенном в uCoz. (Еще есть Визуальный редактор шаблонов, который используется для редактирования дизайна, но о нем как-нибудь в другой раз.)

Пользоваться этим режимом можно каждый раз, когда вам нужно добавить или отредактировать материал на сайте. Редактор одинаков для всех контент-модулей: блога, каталогов, FAQ, интернет-магазина и т.д. Вся суть этого режима отображается в его английском названии - WYSIWYG (What You See Is What You Get*) - каким вы видите материал в этом окошке, таким он и появится у вас на сайте.

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




Или во  встроенном виде (когда он установлен как редактором материалов по-умолчанию).



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


  1. Сохранить материал.
  2. Сохранить в формате XHTML.
  3. Предварительный просмотр.
  4. Поиск в материале.
  5. Вставить из Word.
  6. Отменить/повторить действие.
  7. Выбор цвета текста.
  8. Выбор цвета фона.
  9. Создание якоря.
  10. Создание гиперссылки.
  11. Вставить картинку.
  12. Вставить flash-ролик.
  13. Вставить видео.
  14. Вставить таблицу.
  15. Редактирование ячеек в таблице.
  16. Задает таблице абсолютную высоту и ширину.
  17. Вставка спец-символа.
  18. Вставка горизонтальной линии.
  19. Вставка на сайт формы, выпадающего списка, чекбокса, скрытого поля и т. д.
  20. Пустое поле.
  21. Работа с полным форматированием текста.
  22. Выбор стилей.
  23. Выбор типа заголовка.
  24. Выбор шрифта текста.
  25. Выбор размера текста.
  26. Выбор типа начертания текста.
  27. Выбор верхнего/нижнего индекса.
  28. Выбор выравнивания текста.
  29. Создание маркированного списка.
  30. Правая и левая табуляция.
  31. Обнуление форматирования текста.
  32. Вид в режиме HTML кода.

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



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

Для ряда браузеров в редакторе возможна работа с текстом, при помощи клавиатурных сокращений. Причем сокращения такие же как и в  MSWord. Нажав Ctrl+B вы присвоите выделенному тексту тег <B>(для MacOs  будут работать также виндоусовские комбинации клавиш).

Еще одна возможность которой пользуются мало - это прямое редактирование CSS, через Визуальный редактор. Ну в общем-то оно понятно - если человек умеет обращаться с CSS, то он и делать это будет напрямую. А между прочим не открывая админ-панель, редактор шаблонов - можно сэкономить время. Итак, как же это сделать?
Для начала выделяем нужный нам тег, путем выделения куска текста, который в него заключен. В примере я буду модифицировать список, а точнее свойства тега <OL>



1. Выделяем тег
2. Нажимаем на пиктограмму

После чего, если тег мы выделили полностью и без ошибок, раскрывается меню, в котором темно-серым будет подсвечен последний пункт "Особый CSS":



Нажимаем на него и видим имя класса (если оно есть), которым заданы свойства списка и описание этих самых свойств (если они также есть) в верхнем поле:



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



Нажимаем OK  и результат сохраняется. Согласитесь - это удобнее, чем разыскивать в коде нужное место, особенно если вы не сильны в CSS и HTML (да-да, глубокоуважаемые господа профи, я вам верю - что вам удобнее и привычнее прямо сразу в код :)).

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



Ну и помните: "What You See Is What You Get!*" :)

* Что вы видите - то вы и получите.

103 комментариев
1 2 3 »
avatar
1 Написал DMhope 18 Январь 2011, 01:09
Визуальный редактор - зло! Зачатую появляются ошибки! Да и вид кода потом не красивый и не разборчивый!
avatar
2 Написал assasins 18 Январь 2011, 01:11
Полностью поддерживаю
avatar
3 Написал Bruno3618 18 Январь 2011, 01:28
Согласен тоже. Не могу вспомнить конкретно, но при редактировании он добавляет автоматом в <body> код и пользователь попадая на страницу, отредактированную подобным способом, получает возможность перетаскивать, менять местами, удалять и т.д. все элементы на странице. Плюс в IE все просто сходит сума после визуального редактора. Позиции некоторых элементов не соответствуют тому, что было "свизуализировано". А теперь самое интересное, мы бросаемся все поправлять, но не тут то было, визуальный редактор добавляет кучу левого хлама и приводит весь код в полнейший беспорядок.
Кстати, парадокс, если запустить визуальный редактор через IE , то код превратится в красивый и отредактированный)))) вот так.

Но если честно, я бы не стал юзать подобный девайс, не доработан он!!!

avatar
4 Написал DMhope 18 Январь 2011, 01:33
Да и вообще куда больше удовольствия писать код от руки, чем пользоваться редакторами, или программами.

Имхо мое мнение.

6 Написал Meddy 18 Январь 2011, 01:44
Да, специально для вашего мнения, я сделала оговорку о любви к чистому коду biggrin
9 Написал Bahamut 18 Январь 2011, 02:57
Код и материал — немного разные вещи.
26 Написал Saynov 18 Январь 2011, 18:03
точно. простым журналистам хватит визуального редактора, а фрилансеры будут юзать чистый ХТМЛь happy
27 Написал Bahamut 18 Январь 2011, 18:07
Верно. Только лично я сомневаюсь, что здесь все профессиональные фрилансеры. )
5 Написал Meddy 18 Январь 2011, 01:43
Мне кажется, что вы ошибаетесь, никакого <body> он не добавляет никуда. И вы не путаете вообще Визуальный редактор материалов с Визуальным редактором шаблонов?
7 Написал Kurt 18 Январь 2011, 01:54
Визуальный редакор - инструмент упрощающий работу, и ускоряющий ее, который надо применять там, где следует. То есть имеющий свою сферу применения, и в большинстве случаев вполне достаточный.
Если у вас время лишнее, или есть высокая любовь к "искусству", то очень может быть он не для вас. Но это не значит что он бесполезен для всех.
Круто - это когда вы достигаете поставленной цели и задачи. А не когда вы делаете это наиболее грамотно, изощренно и т.п.
avatar
11 Написал Некий 18 Январь 2011, 06:58
Да поработайте вы над кодом, который «рожает» визуальный редактор и все повально начнут им пользоваться.
15 Написал MrFrost 18 Январь 2011, 07:36
Quote (Kurt)
Круто - это когда вы достигаете поставленной цели и задачи. А не когда вы делаете это наиболее грамотно, изощренно и т.п.

Не согласен. Почему не смогу объяснить biggrin
Висивиг я использую, когда нужно что-то очень быстро сделать. Например, через минуту на мой дом упадет метеорит, нужно быстрее дописать пост в блоге.
Для меня в висивиге делать все даже сложнее.
avatar
19 Написал Jerio 18 Январь 2011, 08:26
Несогласен с вами Kurt. Круто - это и есть поставленная цель и задача когда ты сам быстро, легко и без вот этих косяков Визуальных редакторов сможешь построить код на автомате.
72 Написал skv1991 02 Февраль 2011, 16:40
Зачастую хорошая штука визуальный редактор, но иногда выдает кривоватый код)))
21 Написал archdenis 18 Январь 2011, 10:10
По своему опыту работы с визуальным редактором и результатом, который затем получается, могу сказать, что его (ВР) просто надо уметь готовить и не давать возможности им пользоваться посетителям вашего сайта.
В первую очередь грязь в коде появляется от ненужного форматирования: цвет шрифта, фон заливки, изменение размера шрифтов и изменение самих шрифтов. Я скрыл с помощью css эти настройки для всех пользователей, в том числе и для администраторов. После этого код материалов, публикуемых пользователями стал намного чище.
Во-вторых, стоит скрыть отображение кнопок, увеличивающих и уменьшающих отступ, т.к. они работают не правильно: вместо того, чтобы прописывать margin, они включают абзац в тег blockquote. Получается неправильная верстка, которую кушают поисковики.
Если честно, меня раздражает способы вставки ссылок в визуальном редакторе: там слишком много полей, которые неправильно называются. Какое поле отвечает за title, а какое за отображение самой ссылки в тексте, не сразу объяснишь посетителям сайта, даже продвинутым.
Ещё одним минусом вижу то, что по умолчанию стоит абзац в качестве стиля текста, а не текст без контейнера: невозможно правильно задать в уже готовом виде материалов нормальные отступы красной строки, расстояния между абзацами и т.д., т.к. все эти стили в визуальном редакторе будут отображаться по-другому, не так, как в виде материалов. Кроме того, в предварительном просмотре надо тоже настраивать вид в css, чтобы он совпадал с тем, который есть на сайте. Всё это лишние настройки.
Но есть и неоспоримые плюсы: визуальный редактор позволяет быстро и без особых знаний языка html редактировать и создавать сложное форматирование, что уже до меня не раз сказали.
25 Написал alexneo 18 Январь 2011, 16:39
Это зло для тех кто не умеет пользоваться!
avatar
86 Написал turkmenbusiness 06 Март 2011, 12:27
А Я не согласен. Визуальный редактор - отличная штука.
Хотя я им сам и не пользуюсь. Но это сейчас, а начинал именно с него! cool
8 Написал abasovMike 18 Январь 2011, 01:59
Почему в uCoz код получается гораздо грязнее, чем в Wordpress или Tumblr?
16 Написал MrFrost 18 Январь 2011, 07:37
Таков он, uCoz
10 Написал Bahamut 18 Январь 2011, 03:03
Поясню свой камент номер 10.
Итак, есть код страницы. А есть код статьи, который представляет из себя лишь слегка форматированный текст. На мой взгляд, во втором случае вполне допустимо использовать и такие вот редакторы. Отдельные статьи (точнее страницы) я пишу в хтмлке, конечно. А вот записи в блоге делаю в визуальном и не мучаюсь. Не вижу ничего плохого. Да и разницы между текстом, записанным в хтмл-редакторе и текстом, записанным в визуальном редакторе — почти нету. Парочка курсивов, болд, подчеркнута ссылка… И все. Более сложные материалы, с кучей таблиц к примеру, требуют ручной доводки, а так… Увольте, лишний раз делать.
12 Написал ДухLESS 18 Январь 2011, 07:01
Редактор добавляет в код много мусора. Если, например, многие стили текста можно объединить в один тег с помощью style="", то он же разбивает его на несколько div, span и font. Поэтому мне не жалко несколько минут, чтобы код получился чище.
А для тех, кто еще только знакомится HTML и CSS, он вполне подходит! wink
65 Написал taro 26 Январь 2011, 23:22
Между прочим свое знакомство с HTML я начал с написания статей в html-редакторе. Только много позже я стал что то менять в шаблоне smile Всем начинающим советую поступать так же.
avatar
73 Написал Admin6307 11 Февраль 2011, 16:50
Я лично в основном пишу в html. Но и пользуюсь html-редактором он очень удобен. И что вы все заладили грязный код, грязный код какая вообще разница пользователь его всё равно не увидит, он увидит обычный текст такой же как и через html
avatar
13 Написал Fantom:) 18 Январь 2011, 07:23
Я бы сказал, что визуальный редактор норм, так как он позволяет быстрее написать статью. Да, код и в правду грязен, зато можно сохранить много свободного времени. И к тому же многим будет удобнее работать, когда они видят что у них получается
14 Написал MrFrost 18 Январь 2011, 07:30
Не люблю я висивиги. Почему не могу сказать. Весь кайф получаю когда все делаю вручную. С помощью висивига как то даже сложнее делать.
avatar
17 Написал Jerio 18 Январь 2011, 08:21
abasovMike, uCoz пользуется особо своей админ панелью (которая находится вверху над сайтом) из за ее скрипта добавляется грязь к код, после вставки шаблоны со статусом pussed допустим на XHTML 1.0 Strict он ему не не подходит, начиная вставлять свои js скрипты для выполнения действия, таблицы которые сразу могут нарушать код. А uCoz уважаемый, даже не дает этого редактировать глобально. к WP отлажен весь код, я тоже когда создавал блог везде у меня pussed, была одна ошибка влез в сценарий js и исправил.
avatar
18 Написал Jerio 18 Январь 2011, 08:23
А висивиги, всегда добавляют в код много мусора. Такое хорошо применять стиль текстам и вставлять изображения и его выравнивания особого не больше.
20 Написал GID-vologda 18 Январь 2011, 09:29
Визуальный редактор нужная вещь для новичков, пока был сам зеленый и не знал HTML работал через него, пусть много мусора было и кучу замечаний по поводу кода приходило в мой адрес. Он во многом помог. Единственную особенность я усвоил в работе с ним - это (как можно меньше лишних движений) и тогда меньше пустых тегов и другого мусора smile
Всё остальное - мелочи.
Визуальный редактор необходимо развивать и дорабатывать, что бы неопытные и не знающие HTML могли наполнять свои сайты в системе uCoz.
P.S. Поддержи uCoz - приведи друга.
22 Написал Olsiva 18 Январь 2011, 12:17
Визуальный редактор очень нужен новичкам, хотя бы потому, что с ним легко учится HTML/CSS. smile Если какой-то баг - приходится лезть в код, что очень полезно.
23 Написал AlexPS 18 Январь 2011, 13:52
Для добавления материалов нормально, но для редактирования кода, это только в крайнем случае smile
avatar
24 Написал Vizit7302 18 Январь 2011, 16:29
Редактор не идеален однозначно. Но пользоваться им можно, например, так. Добавляем по-быстрому материал, сохраняем, любуемся. Затем опять открываем для редактирования в HTML, переносим код в текстовый редактор с TIDy, например, в PSPad, быстро и легко устраняем все корявости, и сохраняем на сайте в новом виде. Ошибок остается намного меньше хотя бы в материале. biggrin
30 Написал AlexPS 18 Январь 2011, 19:03
ну попробуйте таким образом добавить на новостной сайт 40-50 статей за день
avatar
33 Написал Vizit7302 18 Январь 2011, 20:45
Мой способ полезен для новичков, поскольку заставляет включать мозги и чему-то учиться. Пока найдешь способ исправления ошибок, одновременно узнаешь что-то полезное. Ucoz - это полигон для школяров. А для спецов - вы что-то с хостингом попутали, вам вообще не сюда biggrin
34 Написал Bahamut 18 Январь 2011, 21:57
А здесь и вы что-то загоняетесь… Важно не то, насколько человек спец (три раза ха вам в лицо), а требования, предъявляемые к проекту. Если Юкоз подходит — сделать можно и на нем.
avatar
41 Написал Vizit7302 20 Январь 2011, 13:02
Можно сделать и на Юкозе, согласен, если помучаться. Попробуйте как-нибудь даже без визуального редактора сделать идеальный код в материале, добавить его на сайт, а потом опять проверить уже сохраненный тот же код на валидность, ...и начинай сначала biggrin
avatar
55 Написал MrKredo 22 Январь 2011, 18:15
"..незначительном добавлении* статей."
изменении*
avatar
54 Написал MrKredo 22 Январь 2011, 18:12
-1 Укоз идеально подходит для файловых порталов(картинки, игры, видео ...), без труда выдерживает несколько тысяч человек и все за каких-то 3$(при доходе в несколько сотен $), это идеальное соотношение цена-качество. Поэтому единственный школяр -это ты=)
З.ы.
Полностью согласен с комментом бахамута. От себя добавляю, что текстовый редактор можно использовать только! при незначительном добавлении статей. В остальных случаях лучше работать руками, ибо мусора очень много.
avatar
56 Написал Vizit7302 23 Январь 2011, 15:18
Прошу воздержаться от навешивания ярлыков на незнакомых вам людей. Давайте говорить по сути вопроса. Себя спецом не считаю, но и вас по этическим соображениям тоже.
С тем, что визуальный редактор сильно мусорит, надеюсь, согласны.
Quote
З.ы.- аналог P.S, а если быть конкретнее, то это тот же PS, только русской раскладкой wink Появилось, как я думаю, от банальной лени переключения раскладки на клавиатуре.
Лень - двигатель прогресса)
avatar
57 Написал MrKredo 23 Январь 2011, 17:13
Вот и я
Quote
прошу воздержаться от навешивания ярлыков на незнакомых вам людей.

Quote
Ucoz - это полигон для школяров.
avatar
58 Написал Vizit7302 24 Январь 2011, 19:37
Извините, не подумал, что можете принять в свой адрес. Спасибо укозу за его возможности - и это главное!, а когда мы ворчим -для него это ох как полезно, думаю, парни постараются сделать лучше чем сейчас biggrin
avatar
28 Написал Rasiel 18 Январь 2011, 18:32
Всегда отключаю визуальные редакторы где бы то ни было) Честно говоря, даже не тестировал редактор юкоза - ибо заведомо известно что очень сильно мусорит и нефункционален.

кстати, что это за глупость:

Quote
Если вы, все же, решили изменить дизайн, можете воспользоваться встроенным визуальным редактором или любым другим HTML редактором (например, FrontPage, DreamWeaver, HomeSite и т.п.). Мы настоятельно советуем использовать сторонний HTML редактор, так как встроенный подходит только для мелких изменений и портит оформление HTML-кода.
avatar
29 Написал Rasiel 18 Январь 2011, 18:35
лучше бы добавили хтмл кодов в стандартный HTML редактор без подстветки:
1. html-коды, чтобы не писать их много
2. вставку html кода страницы, чтобы удобно и быстро создать таблицу.
а то так приходится руками вписывать
avatar
31 Написал uCozer4397 18 Январь 2011, 19:20
Ребаята лучше откройте дерикторию /php/ поскорей а не этот бред развивайте, он не нужен
32 Написал AlexPS 18 Январь 2011, 19:41
тебе не нужно, так сиди и помалкивай angry
avatar
37 Написал Rasiel 19 Январь 2011, 13:31
Привет, дружок
52 Написал mddn 22 Январь 2011, 17:38
angry *Значок выражающий "Гнев Империи". Чётко.
avatar
35 Написал FullBlooded 19 Январь 2011, 00:06
cool story bro.
Хочешь получить "мего-валидный" код - юзай визуальный редактор.
Школота в нем даже макеты верстает, про что тут вообще говорить.
Инструмент №1 для веб-мастера. lol
avatar
36 Написал Rasiel 19 Январь 2011, 13:30
Судя по вашему тексту, вам самому пора во второй класс.
Хотя, я согласен с вашим мнением.
avatar
46 Написал FullBlooded 20 Январь 2011, 18:46
Не зря в профиле всегда указан возраст, да?
Мастерски пытался заовнить, и согласился с мнением.
Неудачный тролль. cool
avatar
47 Написал Rasiel 20 Январь 2011, 19:35
Quote (FullBlooded)
cool

Крут.
avatar
49 Написал FullBlooded 22 Январь 2011, 02:45
Да, конечно.
38 Написал Ternox 19 Январь 2011, 18:07
Забыли упомянуть, что он жутко портит код, хотя для пользователей сайта идеально подходит при добавлении материала (ВВ-коды не все понимают, а визуальный довольно прост).
39 Написал Bassolo 19 Январь 2011, 23:11
Короче, из прочитанного сделал общую мысль: "сам пользоваться не буду, но ламерам пойдет."

Quote (Kurt)
Круто - это когда вы достигаете поставленной цели и задачи. А не когда вы делаете это наиболее грамотно, изощренно и т.п.

Если слесарь умеет закручивать гайки на 10 только ключом на 10, то грош ему цена. Развивайтесь, Господа!

avatar
40 Написал Huuga 19 Январь 2011, 23:42
*Но сейчас мне слишком ценно своё время*
Больше подходит моё smile
42 Написал alexneo 20 Январь 2011, 13:18
Блин ну такие уже навароченые все ппц (спасибо хоть можно поржать)*Да мы кода сквозь пикселы видим*Один простой пример-100% никто не знает наизусть коды-номера всех цветов - значит либо пользуетесь редактором либо еще хуже ищите номера на стороне)))))
avatar
43 Написал Rasiel 20 Январь 2011, 18:26
Ваш ример неудачный. Цвета наоборот легко видеть через текст - он разделен на три части, например:
#FF00FF

Первые две буквы - красный, вторые - зеленый, третие - синий. Красного и синего тут по максимуму(FF), а зеленого нету(00), следовательно, он будет яркопурпурный.
#9F8264 - серый с оттенком блювотного цвета
#237822 - темно-синий-сероватый
7600D7 - фиолетовый ближе к синему

и тд

Гарантирую, что вы не знали, что
#FF0099 = #F09
smile

48 Написал alexneo 20 Январь 2011, 20:49
Да я и знать не собираюсь - делать нечего мозги забивать)Для умных есть юкоз - а для *слишком (умных)* более сложные вещи ))))А цифры вы нашли прикольные)))
avatar
44 Написал Rasiel 20 Январь 2011, 18:27
второй цвет ошибся - там темно-зеленый
avatar
45 Написал Rasiel 20 Январь 2011, 18:37
Единственное что для меня сложно запомнить - это css параметры - постоянно приходится гуглить "css ***" и проверять в htmlbook что я не так сделал.
но в визуальном редакторе я смотрю придется тоже самое делать
1-20 21-40 41-49
Ваш комментарий