Сайт
Елисеева
Вячеслава
Четверг, 25.04.2024, 19:55
Приветствую Вас Гость | RSS
Взрослеем!

          


Поиск по сайту

Меню сайта

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Погода
          

Мои школы
СШ №1 г. Ефремова МВИЗРУ ПВО

ГРТУ ПВО

Facebook
Вячеслав Елисеев


Праздники Беларуси
Праздники Беларуси

Главная » ПК и ПО » Мои справки по ucoz » Опытные разработки

Визуальный редактор uCoz
06.04.2012, 12:02

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

Для добавления материала в контент-модули сайта или его редактирования необходимо авторизироваться на сайте - в "Форме входа" ввести свои логин и пароль и нажать кнопку "Вход".
После авторизации вы попадаете на главную страницу сайта. В помощь администратору сайта в uCoz имеется мощный помощник - админбар, который со всем необходимым функционалом после авторизации высвечивается в виде небольшой полоски в самом верху сайта Фото 1 (Фото 1-8 кликабельны)

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

Фото 1    Фото 2  


Для добавления материала в какой-либо модуль необходимо кликнуть по имени модуля левой кнопкой мышки (ЛКМ), после чего открывается «Страница добавления материала» (панель редактирования) соответствующего модуля.

Фото 3    Фото 4    


Фото 5    Фото 6    


Фото 7    Фото 8    


Как вы заметили, в каждом активированном модуле системы uCoz «Страницы добавления материала» (панели редактирования) практически одинаковы.

Существует три способа наполнения содержимым страниц модулей сайта:
  1. Визуальный редактор.
  2. Верстка в формате BB-кодов.
  3. Верстка в HTML.
Самый простой (но далеко не лучший) способ вёрстки - с помощью визуального редактора (см. Фото 4,6,8). Он очень напоминает панель редактирования текста в обычном Word. Визуальный редактор предназначен для работы со страницами сайта без обращения к html-коду. Это облегчённая версия стандартных html-редакторов с подсказками.

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

Фото 9  


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

Фото 10  


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

Фото 11  


Инструменты верхней панели

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

2. Иконка вставка. Позволяет вставлять материал как текст из текстового редактора Word. При нажатии на иконку появляется окно вставки текста.

3. Иконки отмены (левая) и повтора (правая) действий. Позволяют отменить шаг действия или повторить его.

4. Иконка цвета текста. Позволяет задавать цвет текста (выделить текст - задать цвет). При нажатии на иконку появляется палитра цветов. Выбор цвета осуществляется выбором цветного квадрата.
Крестик в нижнем левом углу закрывает палитру. Если цвета, представленные в малой палитре не удовлетворяют, можно использовать большую палитру, нажав на 'Больше цветов...'
Здесь можно выбрать web-палитру (256 цветов), именные цвета и безопасную палитру (216 цветов). Это палитры, принятые для Web-страниц интернета. Иллюстрации, созданные в такой палитре будут воспроизводиться на любой модели компьютера без искажений цвета. Вверху слева находятся значения модели RGB, которые можно вставить, если они известны, ниже под ними расположено окно цветового кода (#b0e0e6), который вставляется в html-код страницы. Внизу слева расположены образцы цвета - выбираемый и текущий. Работа с большой палитрой сводится к выбору цвета и нажатию кнопки применить. Если выбираемый цвет будет часто в дальнейшем использоваться, то его можно добавить в особые, нажав кнопку 'Добавить в особые'. При этом цвет появится в малой палитре под строкой 'Особые цвета'

5. Иконка заливка. Позволяет выбрать цвет фона. Работа со цветом фона совершенна аналогична работе со цветом текста (малой и большой палитрами)

6. Иконка ссылка. Позволяет вставлять на страницу ссылку. При её нажатии появляется диалоговое окно с выбором параметров

7. Иконка изображения. Позволяет вставлять изображения. При нажатии на иконку появляется диалоговое окно с выбором параметров
В верхней строке можно выбрать картинку из файлового менеджера. Если картинка находится на другом ресурсе или на компьютере пользователя, то её необходимо предварительно загрузить в файловый менеджер. Во второй строке указывается название, которое будет служить alt-тегом картинки. В третьей строке можно выбрать вариант выравнивания картинки из выпадающего списка
Выбранный вариант выравнивания отображается в нижней части окна. Кнопка 'граница' позволяет выбрать рамку изображения (тип, толщину, цвет)
В окошках размеров можно задать размер изображения в пикселах. В правом части диалогового окна указываются размеры отступа. Пример введённых размеров отступа отображается в нижней части окна.

8. Иконка flash. Позволяет вставить флеш-анимацию. При нажатии на иконку появляется диалоговое окно с выбором параметров
Окно схожее со вставкой изображения. Указывается файл в файловом менеджере, цвет подложки (палитрами), размера объекта, качество воспроизведения, выравнивание и цикл (будет повторятся анимация или нет).

9. Иконка таблица. Позволяет вставлять таблицу. При нажатии на иконку появляется простой вариант построения таблицы
При помощи мышки выбирается количество столбцов и строк, которые выделяются синим цветом. Для подтверждения выбора необходимо необходимо кликнуть мышкой. Для построения более сложной таблицы необходимо нажать на 'Больше возможностей'
Появляется диалоговое окно, позволяющее выбрать число строк, столбцов, расстояние между ячейками, рамку, а также объединить столбцы или строки. Объединение столбцов или ячеек происходит путём выделения мышкой нужных элементов или нажатия кнопки 'Объед >' или 'Объед. v'.

10. Иконка редактирования таблицы. Позволяет редактировать уже созданную таблицу. При нажатии на иконку следует выбрать, что именно будет отредактировано - ячейки или таблица
Диалоговое окно пункта ячейки позволяет вставлять, объединять и удалять строки и ячейки уже вставленной таблицы. Изменению подвергается та ячейка, в которой находится курсор.
Диалоговое окно редактирования таблицы состоит из трёх вкладок:
  • Во вкладке 'Авторазмер' можно указать параметры высота и ширины таблицы.
    Размер по тексту - ширина и высота равны размещённому в ячейке тексту.
    Фиксированная ширина и высота - задаётся значение в пикселах.
    Уместить в окно - ширина и высота таблицы равны окну визуального редактора.
  • Во вкладке 'Свойства' можно задать выравнивание таблицы, отступы от краёв, отступы в ячейках и между ними, рамку и фон таблицы.
    Диалоговое окно редактирования ячейки примерно одинаковое, содержащее тот же самый набор параметров.
    P.S. Удалить ячейку или таблицу можно нажатием на крестик, расположенный на линиях строк и столбцов
  • Во вкладке 'Стиль' можно прописать дополнительные атрибуты таблицы на языке CSS.

    11. Иконка омега. Позволяет вставлять специальные символы, например, ©, £ и другие. При нажатии на иконку появляется список символов. Под списком расположено окно с кодом данного символа. Работа с таблицей сводится к выбору символа (кликнуть мышкой)

    12. Иконка строка. Позволяет вставлять линию, соответствующую тегу hr

    13. Иконка крест. Позволяет удалить всё содержимое страницы. При нажатии на иконку, система спросит подтверждение удаления

    14. Иконка ластик. Позволяет удалять форматирование. Форматирование - это процесс изменения вида текста для различных целей, например, изменение цвета, шрифта, кегля, стиля начертания, выравнивания и т.д. Выделение форматированного текста и последующее нажатие ластика возвращает текст в исходный вид (гарнитура Verdana, цвет чёрный, размер 8 пунктов, выравнивание по левому краю без отступов).

    15. Иконка HTML. Позволяет в отдельном окне редактировать html-код.

    Инструменты нижней панели

    16. Иконка стили и форматирование. Содержит выпадающий список.
    Работа с текстом, абзацем, списками аналогична работе в текстовом редакторе Word. Форматирование ячейки содержит примерно тот же набор параметров, который был рассмотрен выше при рассмотрении инструмента Редактирование таблицы. Пункт 'Особый CSS' позволяет вписать в отдельном окне атрибуты на языке CSS.

    Панель форматирования текста аналогичная таковой в текстовом редакторе Word. Включает:

    17. Выбор типа заголовка.
    18. Выбор шрифта текста.
    19. Выбор размера текста.
    20. Выбор типа начертания текста.
    21. Выбор выравнивания текста.
    22. Создание нумерованного (маркированного) списка.
    23. Правая и левая табуляция.

    В варианте визуального редактора в виде всплывающего окна (см. Фото 9) область инструментов выглядит так:

    Фото 12  


    В общем-то, инструменты панелей этого варианта аналогичны рассмотренному выше, а функцию каждого элемента редактора можно прочитать во всплывающем окне, наведя на пиктограмму указатель мышки.
    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. Вид в режиме HTML кода.
    Материалы по теме:


  • Поделитесь с друзьями


    Категория: Опытные разработки | Добавил: elislav | Теги: Визуальный редактор uCoz
    Просмотров: 8052 | Загрузок: 0 | Комментарии: 2
    Всего комментариев: 2
    1 cronus zeus father  
    0
    In my opinion there is based on many of us, within our most hidden and complicated depths, the yearning to be loved by our fathers and our mothers, to be praised by them within an exhilarating way. http://www.kenzeus.com/ - Chronos As beauty entangles them both, their divine natures are released. http://www.kenzeus.com/ - zeus defeated his father At those ancient games, poems to honour the athletes were cried and yelled along side screaming oxen as bovine limbs were lopped off to burn off in a honorary gesture to.

    2 elislav  
    0
    kenzeus.com понравился; cronus zeus father, почему не используйте здесь BB-коды?

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]
    Переводчик

    Форма входа

    IP-адрес и прочее
           измерьте скорость интернета

    Наши рейтинги
    Этот сайт защищен «Site Guard»

    Друзья сайта
  • HELP на sonikelf.ru
  • Сайт Ирины Веренчик
  • Сайт СШ №1 г. Ефремова
  • Мои альбомы на gallery.ru
  • ГРТУ ПВО
  • МВИЗРУ ПВО
  • МОА КВИРТУ ПВО
  • Ветераны ВВКУРЭ ПВО
  • ЭВЗРКУ ПВО
  • Одесский музей западного и восточного искусства
  • Одесский историко-краеведческий музей
  • Олег Соколов - художник, поэт, зачинатель одесского авангарда

  • Сайты Ефремова
        Ефремов   Ефремов  
      Сайт Ефремовского Дома-музея И.А. Бунина

    Информспонсоры

    Обмен WebMoney
             

    Слушаем радио

    Яндекс.Метрика
        Основан 22.09.2009    Copyright Елисеев В.И. © 2024      Сейчас на сайте человек(а) Online Casino
    Бесплатный конструктор сайтов - uCoz