Официальный сайт на базе MODx как это делается

Размер: px
Начинать показ со страницы:

Download "Официальный сайт на базе MODx как это делается"

Транскрипт

1 СЕРГЕЙ ЗУЕВ Официальный сайт на базе MODx как это делается Книга I. Пособие редактору сайта Глава 3. Визуальный редактор контента Особенности официальных сайтов Системы управления контентом MODx и Etomite Работа редактора сайта Визуальный редактор контента Подготовка текстов Публикация официальных документов Особые приёмы редактирования Дизайн сайтов Сниппеты, модули, плагины Пользователи в MODx Инструменты редактора сайта Нормативно-правовая база

2 Глава 3. Редактор TinyMCE 2 Содержание Глава 3. Визуальный редактор контента... 3 Настройки кнопок... 4 Простая тема... 4 Продвинутая тема... 4 Тема Редактор контента... 5 Тема Индивидуальная... 5 Кнопки и действия... 6 Особо важные действия в редакторе... 8 Вставка текста... 8 Вставка ссылок Вставка изображений Вставка шаблонов Вставка списков Элементы XHTML Типограф Использование стилей Редактирование HTML-кода Специальные символы... 34

3 Глава 3. Редактор TinyMCE 3 Глава 3. Визуальный редактор контента Если в Конфигурации сайта настройка Использовать HTML-редактор установлена Да, то для редактирования контента и аннотаций страниц используется специальный редактор, напоминающий известный всем Word. Но это всё-таки не Word, а Word-подобный инструмент, да ещё встроенный в систему управления сайта. Если эта настройка отключена для всего сайта или отдельного документа, используется простой редактор. В Etomite мы устанавливали редактор FCKEditor, в MODx в Модели сайта используется редактор TinyMCE (рисунок 3.1). Рис Редактор TinyMCE В этом редакторе действуют обычные клавиши навигации, копирования выделенного текста (Ctrl+C), вырезки (Ctrl+X), вставки (Ctrl+V) и прочие. Более сложные действия выполняются с помощью кнопок панели инструментов. При использовании кнопок самое главное - поменьше кнопками пользоваться! Вернее, пользоваться надо, но с умом. Подготовка текста для Интернет значительно отличается от подготовки обычных документов. Полезность или вредность кнопок определяется их действием и влиянием результата этого действия на внешний вид контента страниц. Максимальное количество кнопок показано на рисунке 3.2. С таким набором работать сложно. Рис Полный набор кнопок редактора TinyMCE

4 Глава 3. Редактор TinyMCE 4 Например, кнопки выбора цвета шрифта и фона, вида и размера шрифта являются вредными. Щелчок по такой кнопке установит для выделенного текста конкретные значения (например цвета символов) и это значение будет записано в текст страницы. Навсегда, вернее, до исправления вручную. Если же понадобится изменить дизайн сайта, то такой цвет может уже в него не вписаться. Придется переопределять цвета возможно на сотнях страниц. Правильным решением является применение стилей. Применив, с помощью комбобокса Стили к фрагменту текста соответствующий стиль, мы получим любой визуальный эффект (цвета, шрифт, границы - что угодно). Изменив определение стиля в CSS-файле мы изменим отображение сразу всех страниц сайта. Конечно, когда работает с редактором квалифицированный специалист, он знает, какие кнопки надо использовать, а какие не стоит. Но мы устанавливаем CMS для разных сайтов, а там часто текст вводят "секретарши", и лучше лишние кнопки от них просто спрятать, что соблазна не было. Настройки кнопок Настройки TinyMCE для всей системы управления выполняются через Инструменты - Конфигурация Интерфейс и представление. Сначала необходимо выбрать из списка Тема WYSIWYGредактора какую тему или шаблон вы будете использовать для WYSIWYG-редактора. В списке имеются несколько предопределённых тем: простая (simple); продвинутая (advansed); редактор контента (editor); индивидуальная (custom). Простая тема Здесь только несколько кнопок, расположенных внизу (рисунок 3.3). Тема зашита в код, настраивать нельзя. Рис «Простая» тема редактора TinyMCE Простая тема используется для редактора, встраиваемого во Front-End, то есть в страницы, которые могут редактировать посетители (например, блоги). Продвинутая тема Здесь побольше кнопок, расположенных внизу (рисунок 3.4). Тема зашита в код, настраивать теоретически можно, но фактически настройки не срабатывают.

5 Глава 3. Редактор TinyMCE 5 Рис «Продвинутая» тема редактора TinyMCE Практического значения продвинутая тема для редактора сайта не имеет, хотя в коде редактора она используется как важный прототип. Тема Редактор контента Эта тема включает расширенный набор кнопок (рисунок 3.5), но не очень удачное их сочетание. Рис Тема «редактор контента» для TinyMCE Тема Индивидуальная В конфигурации плагина TinyMCE эта тема называется «custom». Именно эту тему надо использовать (рисунок 3.1). Для темы «индивидуальная» мы подключили необходимые, но достаточные кнопки, предусмотрели их более удобное расположение. Разумеется, при необходимости тему можно ещё оптимизировать, кое-что убрать, но в дальнейшем мы будем описывать именно эту конфигурацию.

6 Кнопки и действия Глава 3. Редактор TinyMCE 6 С каждой кнопкой редактора связано какое-то действие. При подведении курсора к иконке кнопки всплывает подсказка, которую мы будем использовать как название кнопки. У некоторых кнопок есть горячие клавиши. Сведём назначение кнопок в таблицу 3.1. Кнопка Название Описание Таблица 3.1. Кнопки редактора TinyMCE HTML- Редактировать коды Отменить (Ctrl-Z) Вернуть (Ctrl-Y) Открывает окно редактора HTML. В этом окне отображается HTML-код страницы. Окно чрезвычайно полезное, так как позволяет выполнить многие операции, недоступные в визуальном режиме - например удалить невидимый "мусор", быстро отредактировать код. Очень часто быстрее отредактировать код, чем добиться нужного эффекта в визуальном режиме. Для использования редактора HTML надо знать, как минимум основные теги HTML. Синтаксис HTML не входит в состав настоящего пособия, но минимальные сведения см. в специальном подразделе Редактироване HTML. Отменяет последнее действие в редакторе Отменяет отмену последнего действия в редакторе Вставить как простой текст Вставить из Word Очень важная кнопка! См. подраздел Вставка текста Очень важная кнопка! См. подраздел Вставка текста Вставить контент Поиск Замена шаблонный Позволяет вставлять типовые заготовки контента. См. подраздел Вставка шаблонов Выводит диалог поиска. Выводит диалог замены Вставка символа неразрывного пробела Вставка черты В коде HTML это тег <hr /> В визуальном редакторе он не виден, в коде HTML вставляется Вставка символа произвольного Вставка изображения Вставка ссылки для выделенного фрагмента текста Удаление ссылки в выделенном фрагменте Вставка "якоря" Подчистить код избыточный Убрать форматирование Выводится диалоговое окно для выбора символа. Выбранный символ вставляется в текущую позицию курсора. В коде HTML символ обозначется наподобие (для знака параграфа). См. подраздел Вставка изображений См. подраздел Вставка ссылок Удаляет ссылку, если она была Вставка метки внутри документа, на которую можно делать ссылки. Выводится диалоговое окно для ввода имени якоря. Вводите имена якорей английскими символами. При щелчке по Вставить в позицию курсора будет вставлен HTML-код наподобие <a name="part_1" title="part_1"></a> В визуальном редакторе якорь отображается маленьким желтым квадратиком с изображением якоря. По идее, кнопка очень полезная - она должна удалять ненужный невидимый код, наподобие мусора, заносимого при вставке текста из Word. Фактически ничего полезного в реализации, используемой в Модели сайта, не делает. Удаляет теги форматирования в выделенном фрагменте. Очень полезна.

7 Кнопка Название Описание До: Глава 3. Редактор TinyMCE 7 <p>работа с редактором <strong>tinymce</strong>.</p><p><span class="author">пробы: </span></p> После: <p>работа с редактором TinyMCE.</p><p>Пробы: </p> Вставить новую таблицу. Вставить дату Вставляет текущую дату в формате Вставить время Вставляет текущее время в формате 13:07 Включить полноэкранный режим Выпадающий Стили Выпадающий Форматы Типограф Полужирный Курсив список список Окно редактора распахивается на весь размер рабочего фрейма. Для возврата в обычный режим нужно снова щелкнуть эту кнопку. См. подраздел Использование стилей См. подраздел Использование форматов Исправляет типографские ошибки в текстах. См. подраздел Типограф Полужирный шрифт для выделенного фрагмента текста Курсивный шрифт для выделенного фрагмента текста Маркированный список Нумерованный список Делает маркированный список из выделенного фрагмента текста. См подраздел Вставка списков. Делает нумерованный список из выделенного фрагмента текста. См подраздел Вставка списков. Свойства списка Управление свойствами элементов выделенного списка. См подраздел Вставка списков. Уменьшить отступ На каждый щелчок удаляется тег <blockquote> </blockquote> Увеличить отступ Выравнивание влево Выравнивание по центру Выравнивание вправо Выравнивание по ширине Цитата Вставка Аббревиатура Акроним Удаление Редактировать CSS-стиль На каждый щелчок вставляется тег <blockquote> </blockquote> Для блочного элемента вставляется атрибут style="text-align: left;" Для блочного элемента вставляется атрибут style="text-align: center;" Для блочного элемента вставляется атрибут style="text-align: right;" Для блочного элемента вставляется атрибут style="text-align: justify;" Вокруг выделенного текста вставляется элемент XHTML cite (см. подраздел Элементы XHTML) Вокруг выделенного текста вставляется элемент XHTML ins (см. подраздел Элементы XHTML) Вокруг выделенного текста вставляется элемент XHTML abbr (см. подраздел Элементы XHTML) Вокруг выделенного текста вставляется элемент XHTML acronym (см. подраздел Элементы XHTML) Вокруг выделенного текста вставляется элемент XHTML del (см. подраздел Элементы XHTML) Создается inline-стиль для выделенного текста (см. подраздел Использование стилей)

8 Особо важные действия в редакторе Глава 3. Редактор TinyMCE 8 В этом разделе мы более подробно рассмотрим некоторые важнейшие действия, вскользь упомянутые при разборе кнопок и действий. Вставка текста Редактору сайта практически непрерывно приходится вставлять текст в содержимое ресурса из буфера обмена. Иначе и быть не может редактор публикует чужие тексты, а если иногда и пишет сам, то в более удобном редакторе, чем TinyMCE. Текст из буфера вставляется точно так же, как и в любом другом редакторе сначала в одном (любом) приложении Windows выделяется весь текст или его фрагмент, затем выделенный текст копируется в буфер обмена Windows через меню Правка-Копировать или с помощью горячих клавиш (обычно Ctrl+C), а затем вставляется в позицию курсора в другом приложении (в данном случае в окно редактора TinyMCE) горячими клавишами Ctrl+V. Весь вопрос в том, что именно мы получим в результате вставки и как это отразится на странице сайта. Подробно этот вопрос рассмотрен в главе 9, на примере текстовых процессоров MS Word и Open Office Writer, а именно эти приложения чаще всего используются при подготовке «авторских» текстов. Там наглядно показано, сколько «мусора» притащит с собой вставка из Word. Для того, чтобы предотвратить засорение страниц сайта, в TinyMCE специально предусмотрена кнопка Вставить как простой текст. При щелчке по этой кнопке открывается специальное окно (рисунок 3.6). Рис.3.6. Вставка простого текста из буфера Мы скопировали в буфер, а затем вставили в окно Вставить как простой текст пару предыдущих абзацев. Видно, что вставлено только содержимое самого текста, без форматирования. Щелкнув кнопку Вставить мы поместим этот текст в TinyMCE (рисунок 3.7). Рис.3.7. Простой текст в TinyMCE Вставленный текст не имеет форматирования, но, если открыть его в редакторе HTML-кодов, мы увидим, что TinyMCE добавил простейшие теги HTML (рис. 3.8).

9 Глава 3. Редактор TinyMCE 9 Рис.3.8. HTML-код, добавленный в простой текст TinyMCE Необходимое форматирование (разбивку на абзацы, выделение) легко добавить нажатием Enter и кнопки Полужирный (рисунок 3.9). Рис.3.9. Текст после форматирования в TinyMCE А всё-таки, что было бы если бы мы просто вставили эти два абзаца из Word в TinyMCE, без вызова дополнительного окна? Попробуем (рисунок 3.10). Рис Текст после вставки из Word прямо в TinyMCE На рисунке 3.10 на первый взгляд всё кажется правильным. На само деле очень плохо. Мы видим шрифт Times, но он не применяется на страницах сайта. Теперь, как бы мы не изменяли стили, этот текст навечно останется именно таким. Заглянем и в HTML-код (рисунок 3.11).

10 Глава 3. Редактор TinyMCE 10 Рис HTML после вставки из Word прямо в TinyMCE Ужасно! Мы даже не видим полезного текста. Этот HTML-код «весит» в 4 раза больше, чем код, показанный на рисунке 3.8. «Полезный текст» в этом коде начинается только с 79-й строки. Кнопка Подчистить избыточный код здесь не поможет. Кнопка Убрать форматирование поможет частично. Она удалит теги, примененные к тексту, но как вредные, такие как <p class="msobodytext"> или <span lang="en-us">, так и полезные, такие, как <strong>. А «мусорные» стили, занимающие 78 строк останутся TinyMCE не знает, что это мусор. Вывод: Никогда не вставляйте текст из Word прямо в редактор пользуйтесь кнопкой Вставить как текст. Замечания 1. Не только текст из Word заносит мусор. Можно скопировать текст из любого другого приложения, в том числе из окна браузера и результат будет примерно таким же. Исключением являются простые текстовые редакторы, наподобие Notepad они всегда работают только с простым текстом. В редакторе имеется ещё одна кнопка Вставить из Word. Попробуем скопировать текст из Word и воспользоваться этой кнопкой. Открывается диалоговое окно (рисунок 3.12). Рис Диалоговое окно Вставить из Word.

11 Глава 3. Редактор TinyMCE 11 Уже в диалоговом окне видно, что текст из Word вставляется с форматированием. При щелчке по кнопке Вставить содержимое окна вставляется в редактор и будет выглядеть так же, как на рисунке При этом, если просмотреть HTML-код, будут видны только самые простые теги, наподобие p и strong (рисунок 3.13). Рис HTML-код текста, вставленного через диалоговое окно Вставить из Word В HTML-коде уже нет определений стилей, как на рисунке 3.11, и в тоже время видно, что теги strong явно проставлены «автоматом». Важные замечания Результаты вставки текстов из Word зависят от версии TinyMCE и от настройки кнопок. В последних версиях с необходимыми обновлениями и настройками избыточный код не вставляется и при прямой вставке текста из Word в окно редактора. А в устаревших версиях TinyMCE даже кнопка Вставить из Word может работать неправильно и, возможно, придется всегда пользоваться кнопкой Вставить как текст. Редактору следует поэкспериментировать со вставками, чтобы точно знать, как ведёт себя его экземпляр TinyMCE. Вставка ссылок Вставка гиперссылок важнейшее действие. Гиперссылки (далее ссылки) в тексте документа могут быть на файлы, посторонние сайты и на ресурсы внутри дерева MODx (внутренние ссылки). Для вставки или редактирования ссылки надо выделить фрагмент текста и нажать кнопку - Вставка ссылки. Рассмотрим пример (рисунок 3.14). Вставим в текст статьи внутреннюю ссылку на страницу Губернатора. Рис Выделение текста для вставки Мы выделяем в тексте слова Олег Богомолов и щелкаем кнопку Вставка ссылки. В диалоге Вставить / Изменить ссылку открываем Список ссылок и выбираем из древовидного списка требуемый ссылочный документ по его названию (рисунок 3.15).

12 Глава 3. Редактор TinyMCE 12 Рис Выбор ссылки из списка После выбора документа в строку Адрес вставляется код ссылки в специально виде (рисунок 3.16). Рис Запись заголовка В диалоге надо также заполнить поле Заголовок. После щелчка по кнопке Вставить будет сформирован HTML-код ссылки: <a title="страница Губернатора" href="[~116~]"> Олег Богомолов</a> Так делаются правильные ссылки на внутренний ресурс сайта в виде [~ID~]. Неправильные варианты ссылок на внутренние ресурсы: <a href= > присутствует имя домена, которое может измениться; <a href= 131_fz.html > псевдоним страницы может измениться. <a href= 729.html > суффикс html может измениться. Если нужно вставить ссылку на внешний ресурс, то в поле Адрес нужно написать вручную, а лучше вставить скопированный из адресной строки браузера полный URL внешнего ресурса. Возможен и третий вариант ссылка на ресурс (файл), лежащий в файловой системе сайта. Для выбора такого ресурса необходимо щелкнуть кнопку справа от поля ввода Адрес. Откроется диалоговое окно Ajax File Manager (рисунок 3.17), в котором можно выбрать файл в любом подкаталоге папки assets.

13 Глава 3. Редактор TinyMCE 13 Рис Выбор файла в папке Assets При щелчке по кнопке Выбрать полный URL файла будет вставлен в строку ввода Адрес (рисунок 3.18). Рис Запись заголовка Необходимо заполнить поле Заголовок и щелкнут кнопку Вставить. В результате выделенный текст будет обрамлен кодом ссылки, наподобие: <a title="план памятника " href="assets/files/pres_center/plan.zip">бюст генерала Шумилова</a> Замечание Обратите внимание абсолютный URL, находившийся в поле Адрес после вставки преобразовался в относительный. Так и должно быть все внутренние ссылки должны быть только относительными. Для удаления ссылки нужно щелкнуть кнопку - Удаление ссылки в выделенном фрагменте. Она доступна, если в выделенном фрагменте действительно есть ссылка. Вставка изображений Для вставки в текст картинки необходимо поставить курсор в место вставки и щелкнуть кнопку Вставить/Изменить изображение. В открывшемся диалоговом окне (рисунок 3.19) на вкладке Основные щелкаете кнопку справа от строки Адрес картинки. Рис. Диалог Вставить/изменить изображение. Вкладка Основные. Открывается Ajax File Manager (AFM) (рисунок 3.19).Выбираете нужную картинку в подкаталогах assets/images с помощью файлового менеджера. Во время выбора можно создать новую папку и загрузить картинки на сервер со своего компьютера.

14 Глава 3. Редактор TinyMCE 14 Рис Выбор картинки с помощью AFM (режим таблица) На рисунке 3.19 показан AFM в режиме Таблица, с отображением имен, размеров и дат создания файлов. При щелчке по иконке рядом с именем файла можно просмотреть изображение (рисунок 3.20). Рис Просмотр изображения в AFM Если перевести AFM в режим Эскизы (радиопереключатель вверху слева), то будут отображаться эскизы изображений (рисунок 3.21).

15 Глава 3. Редактор TinyMCE 15 Рис Выбор картинки с помощью AFM (режим Эскизы) При щелчке по кнопке Выбрать URL картинки вставляется в поле Адрес (рисунок 3.22) диалогового окна Добавить/Изменить изображение (рисунок 3.22). Рис Вкладка Общие диалога Добавить/Изменить изображение На вкладке Основные необходимо заполнить поля Описание и Заголовок. Здесь мы уже видим полное выбранное изображение. В модели сайта есть возможность вставить в страницу уменьшенное изображение (чтобы, например, картинка не вылезала за пределы ширины колонки). Для автоматического создания уменьшенного изображения необходимо перейти на вкладку Вид (рисунок 3.23). Рис Вкладка Вид с исходными размерами

16 Глава 3. Редактор TinyMCE 16 На этой вкладке показаны размеры изображения (533х400). Если размеры не слишком велики, их можно оставить и такими. Однако можно изменить сначала один размер (например, ширину на 300) и нажать клавишу Tab (при этом автоматически изменится второй размер). Можно заполнить и другие свойства, при этом будет автоматически заполняться строка Стиль (рисунок 3.24). Рис Вкладка Вид с измененными размерами Кстати В диалоге видна фраза "Lorem ipsum dolor sit amet", которую часто используют в качестве текстового заполнителя. Фраза «Lorem ipsum dolor sit amet consectetuer» впервые появилась в справке Microsoft Word. Фраза производит впечатление осмысленной латинской поговорки. На самом деле это не так. Хотя фраза и бессмысленна, она имеет давнюю историю. Фраза использовалась печатниками многие столетия для демонстрации наиболее важных особенностей своих шрифтов. Она использовалась потому, что символы составляют сложные по межсимвольным промежуткам и по комбинациям символов пары, наилучшим образом демонстрирующие преимущества данного начертания. В своей статье от 1994-го года журнал «Before & After» отследил фразу «Lorem ipsum...» до философского трактата Цицерона О пределах добра и зла, написанного в 45 году до нашей эры на латинском языке. В оригинале текст выглядит так «Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...», и переводится как «Нет никого, кто любил бы свою боль, кто искал бы ее и хотел бы чтобы она была у него. Потому что это боль...» В шестнадцатом веке печатники постепенно преобразовали текст Цицерона в представленый пример. С того времени этот, похожий на латинский, текст стал стандартом в печатной промышленности для примеров шрифтов и текстов. Перед появлением электронных издательств дизайнеры импровизировали в работе над макетами, изображая текст при помощи волнистых линий. С появлением самоклеющихся наклеек с напечатанным текстом «Lorem ipsum» появился более реалистичный способ обозначения расположения текста на странице 1. При щелчке по кнопке Вставить сработает плагин DirectResize, который автоматически подготовит нужные файлы, положит их куда надо, сгенерирует гиперссылки, и будет показывать картинки пользователю, да не просто, а с эффектами. В окно редактора TinyMCE будет вставлено уменьшенное изображение (рисунок 3.25). В HTML-коде редактора ссылка будет в виде <img style="border: 1px solid black; margin: 10px;" title="крестный ход" src="assets/images/admobl/fotorep/2009/090123/02.jpg" alt="крестный ход" width="300" height="225" /> 1

17 Глава 3. Редактор TinyMCE 17 Рис Уменьшенное изображение в редакторе На странице же сайта, просматриваемой пользователем код картинки будет иной: <a href="images/5b d2b db06cf/02.jpg" class="highslide" onclick="return hs.expand(this, {captionid: 'caption6'})"> <img style="border: 1px solid black; margin: 10px;" title="крестный ход" src="images/4f611eb235748c88a9ebe172a2ea6875/thumb_02.jpg" alt="крестный ход" width="300" height="225" /> </a> <div class="highslide-caption" id="caption6"> </div> При просмотре страницы пользователь будет видеть миниатюру (рисунок 3.26). Рис Уменьшенное изображение на странице сайта При наведении курсора на миниатюру он примет вид лупы, а при щелчке по миниатюре будет показано в специальном всплывающем окне полное изображение (рисунок 3.27). Рис Всплывающее увеличенное изображение при щелчке по миниатюре.

18 Это всплывающее окно можно перетаскивать и закрыть. Глава 3. Редактор TinyMCE 18 Замечание В приведенном примере картинка имела ширину 533 пикселя и безболезненно могла быть вставлена в страницу без изменения размера. Но мы могли иметь и очень большое изображение, порядка нескольких тысяч пикселей. Такое изображение обязательно надо уменьшить до приемлемого размера. Всплывающее окно просмотра в этом случае может и не развернуться до полного размера, но в нем будет специальная пиктограмма для дополнительного увеличения. Такую технологию можно использовать и при заполнении Аннотации, и при заполнении Содержимого ресурса с учётом следующего замечания: Замечание 1 На сайте Правительства Курганской области в анонсы новостей принято иллюстрировать миниатюрами размером 160х120 пикселей. Миниатюры изготавливаются редакторами сайта самостоятельно. В новой модели сайта мы предлагаем эти миниатюры делать размером 100х75 или 100х80 пикселей. Это сокращает вес картинки в 4 5 раз, позволяет лучше использовать место на странице без потери качества рисунка. Для таких миниатюр можно также использовать описанную выше технологию DirectResize, однако мы не советуем этого делать. Причина в том, что таких изображений очень много, а для генерирования каждого из них расходуются значительные ресурсы сервера (а они не безграничны) и страницы загружаются медленнее. Особенно это заметно будет на Главной странице, где показывается сразу более десятка миниатюр. Замечание 2 На старом сайте в код вставлялся вручную тег <BR clear= all >. Не вставляйте его в код!!! Это приведет к сползанию вниз всего контента! Вставка шаблонов Кнопка позволяет вставлять «шаблонный контент». В диалоговом окне Шаблоны (рисунок 3.28) можно из списка Шаблон выбрать один из шаблонов. Рис Выбор шаблона из списка Выбранный шаблон отображается в диалоговом окне так, как он будет виден на странице (рисунок 3.29). Рис Отображение выбранного шаблона

19 Глава 3. Редактор TinyMCE 19 При щелчке по кнопке Вставить шаблон вставляется в редактор (рисунок 3.30). Рис Шаблон, вставленный в редактор Далее прямо в редакторе можно исправить на реальный текст шаблона (рисунок 3.31). Рис Шаблон с исправленным текстом В листинге 3.1 показан HTML-код вставленного шаблона. Красным цветом выделен текст, который пришлось ввести по месту. Листинг 3.1. Код вставленного шаблона <div class="bt_block <div class="bt_container"> bt_dark" style="width: 200px; float: right;"> <div class="bt_title"><strong>заявление Губернатора</strong></div> <div class="bt_text"> Несмотря на временные трудности, мы обязаны завершить эту серьезную работу. Долг перед нашими отцами и дедами выше любых кризисов </div> </div> </div> Как видим, шаблон позволил ввести достаточно сложный участок кода. Для того, чтобы в полную силу использовать шаблоны, их необходимо заготовить и настроить. Эти процедуры описаны во второй части Пособия. Вставка списков Маркированный список Кнопка Маркированный список делает список из выделенного фрагмента текста. Например, три абзаца с кодом, показанным в листинге 3.2 будут преобразованы в список, показанный в листинге 3.3. Листинг 3.2. Код из трех абзацев <p> Первый</p> <p>второй</p>

20 Глава 3. Редактор TinyMCE 21 Рис Установка свойств списка Замечание К сожалению, не работает установка начального номера в списке (атрибуты списка). Назначенный атрибут вначале виден, но в коде не сохраняется. Возможно мы ещё найдем и устраним источник этой ошибки. Если был выделен маркированный список, то предлагается изменить тип маркера (рисунок 3.34). Рис Установка свойств маркированного списка Элементы XHTML Несколько кнопок предназначены для вставки элементов XHTML (о XHTML см. раздел Редактирование HTMLкода). Эти элементы редко применяются на сайтах, во основном, потому, что про них редакторы не знают. Плагины к TinyMCE облегчают процесс вставки таких элементов, которые помогут улучшить вид страниц. Цитата Кнопка Citation (Цитата), выводит диалоговое окно для вставки цитаты к выделенному фрагменту текста (рисунок 3.35). Рис Диалоговое окно цитаты В этом диалоговом окне главное заполнить поле Заголовок. При щелчке по кнопке Обновить выделенный фрагмент будет отображен специальным образом обычно в виде курсива, подчеркнутого пунктирной линией (рисунок 3.36).

21 Глава 3. Редактор TinyMCE 22 Рис Отображение цитаты на странице При наведении курсора на цитату будет всплывать подсказка с текстом заголовка. HTML-код цитаты выглядит так: <p>в этом предложении имеется <cite title="это заголовок цитаты">цитата</cite>.</p> Вставка Кнопка Insertion (Вставка), выводит диалоговое окно для вставки к выделенному фрагменту текста (рисунок 3.37). Рис Диалоговое окно Вставки По идее, вставками должен выделяться какой-то текст, добавленный «опосля» иногда это бывает очень необходимо. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны. HTML-код имеет вид: <p>в этом предложении делаем <ins>вставку</ins>.</p> В браузере вставка обычно отображается в виде подчеркнутого текста (рисунок 3.38). Рис Отображение вставки на странице Удаление Кнопка 3.39). Deletion (Удаление), выводит диалоговое окно удаления выделенного фрагмента текста (рисунок Рис Диалоговое окно Удаление Так выделяться какой-то текст, удаленный в новой версии документа иногда это бывает очень необходимо. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны. HTML-код имеет вид: <p>в этом <del>предложении</del> слове нет такой буквы!</p> В браузере удаление обычно отображается в виде зачеркнутого текста (рисунок 3.40). Рис Отображение удаления на странице

22 Аббревиатура Глава 3. Редактор TinyMCE 23 Кнопка Abbreviation выводит диалоговое окно вставки аббревиатуры для выделенного фрагмента текста (рисунок 3.41). Рис Диалоговое окно Аббревиатура В этом диалоговом окне главное заполнить поле Заголовок. При щелчке по кнопке Обновить выделенный фрагмент будет отображен специальным образом обычно в виде курсива, подчеркнутого пунктирной линией (рисунок 3.42). Рис Отображение аббревиатуры HTML-код имеет вид: <p>различия между <abbr title="extensible Hypertext Markup Language Расширяемый язык разметки гипертекста">xhtml</abbr> и HTML</p> Тег <ABBR> указывает, что последовательность символов является аббревиатурой. С помощью параметра title дается расшифровка сокращения, что позволяет понимать аббревиатуру тем людям, которые с ней не знакомы. Кроме того, поисковые системы индексируют полнотекстовый вариант сокращения, что может использоваться для повышения рейтинга документа. Акроним Кнопка Acronym выводит диалоговое окно вставки акронима для выделенного фрагмента текста (рисунок 3.43). В отличие от аббревиатуры, акроним это устоявшееся сокращение, которое применяется как самостоятельное слово. К акронимам, например, можно отнести следующие слова: СПИД, ликбез, замполит, США, DOS и др. Рис Диалоговое окно Акроним В этом диалоговом окне главное заполнить поле Заголовок. При щелчке по кнопке Обновить выделенный фрагмент будет отображен специальным образом обычно в виде курсива, подчеркнутого пунктирной линией (рисунок 3.44). Рис Отображение акронима HTML-код имеет вид:

23 Глава 3. Редактор TinyMCE 24 <p><acronym title="акроним это устоявшееся сокращение, которое применяется как самостоятельное слово">dos</acronym> - дисковая операционная система. </p> Пояснения к элементам XHTML В штатной комплектации TinyMCE диалоговые окна для элементов XHTML имеют несколько дополнительных полей, которые никак не используются в коде. Чтобы не смущать редакторов, мы оставили только поле Заголовок, а для вставки и удаления только пояснение. Отображение элементов XHTML может быть иным, если они переопределены в каскадных таблицах стилей страницы. Элементы Цитата, Аббревиатура и Акроним имеют почти одинаковый внешний вид и всплывающую подсказку. Какой же из них применять? Здесь надо учитывать, что это логические, а не только визуальные элементы. Элемент Цитата (cite) обычно содержит ссылку на какой-то иной источник. Элементы Акроним и Аббревиатура имеют практически одинаковое назначение и в следующих спецификациях XHTML предполагается исключение элемента Акроним. Типограф В главе 4 имеется специальный раздел, посвященный типографике Типогра фика это графическое оформление печатного текста посредством набора и вёрстки с использованием норм и правил, специфических для данного языка (для наших сайтов русского). По правилам типографики: знак тире ( ) нельзя заменять дефисом, имеющимся на клавиатуре (-); знак номера ( ) нельзя подменять буквой N; русские кавычки («ёлочки») не должны подменяться знаком дюйма (") и «программистскими» кавычками, а внутри кавычек-ёлочек должны использоваться кавычки другого вида («кавычки лапки»); букву «ё» нельзя заменять буквой «е»; спецсимволы, например,, нельзя заменять последовательностями символов наподобие (С); апостроф нельзя заменять знаком «одинарной кавычки» '. Разумеется, правильная расстановка символов требует дополнительных усилий, хотя у квалифицированных авторов все символы правильно расставляются на уровне инстинктов. Для облегчения работы редактора сайта в редактор TinyMCE, используемый в MODx, мы встроили специальный плагин Типограф, позволяющий автоматически преобразовывать неправильное оформление в правильное. На рисунке 3.45 показан неправильный текст, вставленный в редактор. В нём имеется множество оформительских ошибок и те, которые мы упоминали (кавычки, тире, специальные символы), и иные (знаки умножения, дроби и т.п.).

24 Глава 3. Редактор TinyMCE 25 Рис Неправильный текст в редакторе При щелчке по кнопке Типограф можно выбрать один из трех популярных типографов 2 (рисунок 3.46). Рис Выбор типографа При щелчке по имени типографа текст из редактора посылается в Интернет на удалённый сервер, там обрабатывается и возвращается обратно. Результат обработки показан на рисунке Типографы работают немного по-разному. Мы рекомендуем идущий первым в списке Spearance. Можно и последовательно применить несколько типографов.

25 Глава 3. Редактор TinyMCE 26 Рис Текст, обработанный типографом Некоторые исправленные ошибки мы подчеркнули. Сравните оригинал и результат. Совет редактору Правильные тексты должны быть не только в контенте документа, но и в заголовках, описаниях и в чанках, выводимых в боковые колонки. Эти тексты набираются вручную и возможны типографские ошибки. Не забывайте, что любой текст можно вставить в TinyMCE и применить к нему Типограф. Потом перейдите в режим HTML и, через буфер обмена перенесите текст в нужное место, например в редактор чанка.заведите для таких целей специальную «тестовую» страницу в скрытой папке. Использование стилей Оформление современных сайтов основано на использовании каскадных таблиц стилей (CSS, Cascading Style Sheets). HTML-код используется для того, чтобы указать, что именно отобразить на странице, а таблицы стилей задают цвета, шрифты, фоны, границы, отступы для элементов HTML, то есть указывают, как именно отобразить содержимое страницы. Список Стили Мы уже писали в этой главе об использовании комбобокса Стили вместо кнопок выбора цвета шрифта и фона, вида и размера шрифта. Рассмотрим этот вопрос подробнее. В TinyMCE имеются два выпадающих списка Стили и Форматы. В списке Форматы (рисунок 3.48) отображается список основных элементов логической разбивки текста абзац (p), заголовки (h1-h6), блочный элемент (div) и т.п. Рис Список Форматы Применив к выделенному фрагменту текста выбор из списка Форматы мы можем заменить логический элемент на другой, например, заменить <p> Текст</p> на <h1>текст </h1>. Как правило, изменять оформление таких элементов не нужно на странице сайта к ним будет применена таблица стилей. Однако в некоторых случаях к элементу может быть применён особый стиль оформления, который можно выбрать из списка Стили (рисунок 3.49).

26 Глава 3. Редактор TinyMCE 27 Рис Список Стили На рисунке 3.50 показано выделение фрагмента текста. После выделения в вписке Формат текущим стал пункт p Абзац. В справочной строке внизу редактора также указано Путь:p. Рис Выделение абзаца Выбрав в списке Форматы Div мы изменим тип элемента на div (рисунок 3.51). Рис Изменение типа выделенного фрагмента Попробуем применить к выделению специальный стиль. Выберем из списка Стили стиль Комментарий с иконкой слева (рисунок 3.52).

27 Глава 3. Редактор TinyMCE 29 станет одним из элементов обновленной композиции мемориального комплекса. К юбилею Победы планируется также реконструировать стелу "Зауральцам - Героям Советского Союза", обновить композицию у Вечного огня. Кроме того, Правительство области выделит средства на реконструкцию фасада областного краеведческого музея, который примет красивый современный вид. Также будут отремонтированы фасады зданий, расположенных вблизи мемориального комплекса. </div> Результат исправления мы видим на рисунке Рис Исправленный стиль фрагмента Эту корректировку можно было предотвратить. Надо было не выделять абзац, а просто поставить курсор в абзац и применить стиль (рисунок 3.55) Рис Применение стиля без выделения В результате стиль будет применен именно к абзацу (рисунок 3.56, листинг 3.8). Рис Измененный стиль абзаца

28 Глава 3. Редактор TinyMCE 31 Редактирование HTML-кода Редактор сайта, в основном, работает над страницей в визуальном редакторе TinyMCE Редактирование текстов выполняется в режиме WYSIWYG (сокращение от What You See Is What You Get, что видишь, то и получишь, произносится как «ви-зи-виг») способ редактирования, при котором редактируемый материал в процессе редактирования выглядит в точности так же, как и конечный результат. Однако, даже при работе в таком режиме, рано или поздно придётся нажимать кнопку HTML и вносить правку в HTML-код страницы (рисунок 3.59). Рис Редактор HTML-кодов Следовательно, редактор сайта должен владеть хотя бы основами языка HTML и уметь его использовать. Ниже мы даём самые минимальные, но важные сведения по использованию HTML. Знакомство с HTML HTML (Hyper Text Markup Language) это специальный язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, начало и конец каждого из которых обозначаются специальными пометками, называемыми тегами. Элемент HTML эта основная структурная единица веб-страницы. Спецификации языка HTML разрабатываются Консо рциумом Всеми рной паути ны (World Wide Web Consortium, W3C ) организацией, разрабатывающей и внедряющей технологические стандарты для Всемирной паутины. Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML <!DOCTYPE>, которая выглядит примерно так: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " Если эта строка не указана, то добиться корректного отображения документа в браузере становится труднее. Замечания В шаблонах нашей модели сайта мы используем декларацию <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> Тем самым мы объявляем, что наши страницы используют язык разметки не HTML, а XHTML. XHTML (Extensible Hypertext Markup Language Расширяемый язык разметки гипертекста) язык разметки вебстраниц, по возможностям сопоставимый с HTML, созданный на базе XML. Различия между XHTML и HTML заключаются в более строгом синтаксисе языка, на которых мы остановимся ниже. Существует три типа документов XHTML: strict, transitional и frameset. Наиболее употребительной и универсальной из версий XHTML является переходная (transitional), поскольку она позволяет использовать iframe (включение содержимого одной веб-страницы в другую) и атрибут target у ссылок (для указания того, например, что ссылке необходимо открываться в новом окне). Указание об использовании transitional имеется в нашей декларации. После декларации указывается начало документа открывающим тегом <html>. В наших страницах записан расширенный вариант для языка XHTML

29 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> Конец документа записывается в самом конце закрывающим тегом </html>. Глава 3. Редактор TinyMCE 32 Внутри этих тегов должны находиться теги заголовка (<head></head>) и тела (<body></body>) документа. Для нашей модели сайта структура спрятана в шаблонах (см. главу 6) и обычному редактору в неё залезать не придется, поэтому далее мы остановимся только на «внутренних» элементах, которые придется использовать в чанках и при редактировании контента в режиме HTML. Так как многие редакторы сайтов ранее работали с использованием HTML, да ещё устаревших версий, все описания мы будем приводить и для XHTML (считая его устаревшим вариантом) и для HTML. Мы настоятельно рекомендуем не полениться и исправить все синтаксические неточности в старом контенте и чанках. Например, для HTML регистр тегов не имел значения, а для XHTML имеет. В HTML допускались не закрытые теги, а в XHTML все теги, даже одиночные, должны быть закрыты. В HTML допускались атрибуты без кавычек, а в XHTML все атрибуты должны быть заключены в кавычки. Правила XHTML Документы должны быть правильно сформированы. Это означает, что все элементы обязаны иметь закрывающий тег(например, <p></p>) или быть написаны в специальной форме(например, <br />), а также должна соблюдаться корректная вложенность элементов. Имена элементов и атрибутов должны быть в нижнем регистре. Документы XHTML должны использовать нижний регистр для всех имен элементов и атрибутов HTML. Это необходимо, поскольку XML чувствителен к регистру, например, <ul> и <UL> это различные теги. Правила написания значений атрибутов. Все значения атрибутов, даже цифровые должны быть заключены в двойные("") или одинарные('') кавычки. Для непустых элементов необходимы конечные теги. Пустые элементы. Пустые элементы обязаны иметь конечный тег, или стартовый тег обязан заканчиваться />. Например, <br /> или <br></br>. Для совместимости с устаревшими браузерами следует писать пробел перед /> в одиночном пустом элементе. Следует использовать минимизированный синтаксис для тегов пустых элементов, например, <br /> так как альтернативный синтаксис <br></br>, допускаемый XML, дает непредсказуемые результаты во многих существующих браузерах. При создании пустого объекта элемента, чья модель содержимого не EMPTY(например, пустой заголовок или параграф), не следует использовать минимизированную форму(т.е. нужно использовать <p> </p>, а не Символы < и & в тексте документа. Символы < и & в тексте документа должны быть заменены соответствующими последовательностями < и &. Нет необходимости, но желательно заменять также и > на >. Замены элементов: basefont заменяется CSS font-size, font-family; font заменяется CSS font-size, font-family; center заменяется CSS text-align: center или для блочных элементов width:xx; margin:0 auto; strike заменяется CSS text-decoration: line-trough; u заменяется CSS text-decoration: underline; s заменяется CSS text-decoration: line-trough; dir заменяется ul; nobr заменяется CSS white-space: nowrap. Замены атрибутов: align (кроме элементов, относящихся к таблице: col, colgroup, tbody, td, tfoot, th, thead, и tr) заменяется CSS text-align для текста, float для img; language (для script) заменяется type="text/javascript"; background заменяется CSS background: url(); bgcolor заменяется CSS background;

30 Глава 3. Редактор TinyMCE 33 noshade заменяется CSS hr {height: 1px; border: medium none; color: black; background-color: black;} size (для hr) заменяется CSS height; border (кроме table) заменяется CSS border; hspace (для img) заменяется CSS margin-left, margin-right; vspace (для img) заменяется CSS margin-top, margin-bottom; height (кроме img и object) заменяется CSS height; width (кроме img, object, table, col, и colgroup) заменяется CSS width; name (для a и map в XHTML1.1) заменяется id; start (для ol) заменяется CSS counter; type (для ol и ul) заменяется CSS list-style; nowrap заменяется CSS white-space: nowrap; text (для body) заменяется CSS color; alink (для body) заменяется CSS a:hover; vlink (для body) заменяется CSS a:visited; link (для body) заменяется CSS a:link. Варианты правильного и неправильного синтаксиса мы сведем в таблицу 3.2. Таблица 3.2. Некоторые теги HTML Тег Описание Правильно Неправильно p br hr div span Определяет текстовый параграф (абзац). Тег P является блочным элементом, перед ним всегда добавляется пустая строка, параграфы текста идущие друг за другом разделяются между собой вертикальным промежутком. Тег BR устанавливает перевод строки в месте, где этот тег встречается. Рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера. Элемент DIV является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Тег SPAN предназначен для определения встроенных элементов документа. h1...h6 HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег H1 представляет собой наиболее важный заголовок первого уровня, а тег H6 служит для обозначения заголовка шестого уровня и является наименее значительным. a img Тег A является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия параметров name или href тег A устанавливает ссылку или якорь. Тег IMG предназначен для отображения на веб-странице изображений в графическом <p> Первый</p> <p> Второй</p> <br /> <hr /> <div>блок <p>первый</p></div> <p> Строка <span class= red > 2</span></p> <h1>заголовок</h1> <a href= target= _blank title= Чужой сайт > Ссылка на сайт</a> <img src= assets/images/1.gif width= 100 height= 150 alt= Логотип title= Логотип <p> Первый <p> Второй (нет закрывающего тега) <br> (нет закрывающего тега) <hr> (нет закрывающего тега) <div>блок <p>первый</div> </p> (пересечение div и p) <p> Строка <span class=red> 2</p></span> (пересечение p и span, нет кавычек у атрибута class) <a href=http://www.example.com target=_blank> Ссылка на сайт</a> (нет кавычек у атрибутов, нет атрибута title) <img src=assets/images/1.gif> (нет кавычек у атрибута,

31 Глава 3. Редактор TinyMCE 34 Тег Описание Правильно Неправильно b формате GIF, JPEG или PNG. сайта > отсутствуют необходимые атрибуты) Устанавливает жирное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста. strong Тег STRONG предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием. i Устанавливает курсивное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста. em Тег EM предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием. ul Тег UL устанавливает маркированный список. Каждый элемент списка должен начинаться с тега LI. ol Тег OL устанавливает нумерованный список. Каждый элемент списка должен начинаться с тега LI. li Тег LI определяет отдельный элемент списка. Внешний тег UL или OL устанавливает тип списка маркированный или нумерованный. pre Элемент PRE определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. Это <b>жирный</b> текст Это <strong>жирный</strong> текст Рекомендуется для замены тега b Это <i>курсивный</i> текст Это текст <em>курсивный</em> Рекомендуется для замены тега i <ul> <li>первый</li> <li>второй</li> </ul> <ol> <li>первый</li> <li>второй</li> </ol> Рекомендуется заменять тег b на strong. Тег b даёт только визуальное выделение, а тег strong ещё и акцентирует выделение, например в голосовом браузере Рекомендуется заменять тег i на em. Тег i даёт только визуальное выделение, а тег em ещё и акцентирует выделение, например в голосовом браузере <ul> <li>первый <p>второй</p> </ul> (не закрыт тег li, второй элемент списка не начинается с li) Специальные символы Кроме элементов, в HTML-документах есть и сущности (entities) «специальные символы». Сущности начинаются с символа амперсанда и имеют вид &имя; или &#NNNN;, где NNNN код символа в Юникоде в десятеричной системе счисления. Например, знак авторского права ( ). Как правило, сущности используются для представления символов, отсутствующих в кодировке документа, или же для представления «специальных» символов: & амперсанда (&), < символа «меньше» (<) и > символа «больше» (>), которые некорректно записывать «обычным» образом, из-за их особого значения в HTML. Часто на страницах сайта необходимо вставлять специальные символы, которых нет на клавиатуре. Такие символы вставляются в код HTML. Вставлять надо то, что в таблице 3.3 названо Имя. Например:

РАБОТА С ТЕКСТОВЫМ РЕДАКТОРОМ MS WORD

РАБОТА С ТЕКСТОВЫМ РЕДАКТОРОМ MS WORD Министерство образования и науки Российской Федерации Дальневосточный федеральный университет Инженерная школа РАБОТА С ТЕКСТОВЫМ РЕДАКТОРОМ MS WORD Методические указания к практическим занятиям Владивосток

Подробнее

Работа в MS Office 2007. Текстовый процессор Word 2007

Работа в MS Office 2007. Текстовый процессор Word 2007 МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ Государственное образовательное учреждение высшего профессионального образования УЛЬЯНОВСКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ М. С. Кукушкина,

Подробнее

Академия АйТи Применение ПСПО. Лекции. Часть 4 Страница 1 из 273

Академия АйТи Применение ПСПО. Лекции. Часть 4 Страница 1 из 273 IV. РАБОТА С ОФИСНЫМИ ПРИЛОЖЕНИЯМИ...3 1. ОСНОВЫ РАБОТЫ С ОФИСНЫМ ПАКЕТОМ OPENOFFICE.ORG...3 Описание продукта...3 Справочная система...3 Краткая история OpenOffice.org...3 Новое в последней версии пакета

Подробнее

Организация дистанционного обучения в системе «MOODLE»

Организация дистанционного обучения в системе «MOODLE» МИНСКИЙ ГОРОДСКОЙ ИНСТИТУТ РАЗВИТИЯ ОБРАЗОВАНИЯ ЦЕНТР ИНФОРМАЦИОННЫХ РЕСУРСОВ СИСТЕМЫ ОБРАЗОВАНИЯ ОТДЕЛ ТЕХНИЧЕСКИХ СРЕДСТВ ОБУЧЕНИЯ И ДИСТАНЦИОННОГО ОБРАЗОВАНИЯ Организация дистанционного обучения в системе

Подробнее

Лабораторная работа 3. Программирование на языке Visual Basic for Applications (VBA) Теоретическая часть

Лабораторная работа 3. Программирование на языке Visual Basic for Applications (VBA) Теоретическая часть Лабораторная работа 3. Программирование на языке Visual Basic for Applications (VBA) В этой лабораторной работе необходимо выполнить задания своего варианта (номер варианта выбираете по последней цифре

Подробнее

Foxit PhantomPDF Business for HP Руководство пользователя

Foxit PhantomPDF Business for HP Руководство пользователя 1 Copyright 2014 Foxit Corporation. Все права защищены. Запрещается полное или частичное воспроизведение, передача, распространение или хранение в любом виде настоящего издания без предварительного письменного

Подробнее

Система дистанционного обучения Moodle

Система дистанционного обучения Moodle Санкт-Петербургский государственный университет информационных технологий, механики и оптики Кафедра компьютерных образовательных технологий А.В. Белозубов, Д.Г. Николаев Система дистанционного обучения

Подробнее

Кравченко Г.В., Волженина Н.В. РАБОТА В СИСТЕМЕ MOODLE: РУКОВОДСТВО ПОЛЬЗОВАТЕЛЯ Учебное пособие СОДЕРЖАНИЕ

Кравченко Г.В., Волженина Н.В. РАБОТА В СИСТЕМЕ MOODLE: РУКОВОДСТВО ПОЛЬЗОВАТЕЛЯ Учебное пособие СОДЕРЖАНИЕ Кравченко Г.В., Волженина Н.В. РАБОТА В СИСТЕМЕ MOODLE: РУКОВОДСТВО ПОЛЬЗОВАТЕЛЯ Учебное пособие СОДЕРЖАНИЕ ВВЕДЕНИЕ 3 1. ОСНОВЫ РАБОТЫ С СИСТЕМОЙ ДИСТАНЦИОННОГО ОБУЧЕНИЯ MOODLE 5 1.1. Предпосылки появления

Подробнее

ЧАСТЬ 1. Уроки с 1-5

ЧАСТЬ 1. Уроки с 1-5 Помоги себе сам»: подсказки для начинающего пользователя ЧАСТЬ 1 Уроки с 1-5 Подсказки для начинающи х Оглавление Урок 1 Знакомство с компьютером... 3 Урок 2 Работа с папками и файлами компьютера... 18

Подробнее

Разработка более сложной формы (прием товаров)

Разработка более сложной формы (прием товаров) Глава 5 Разработка более сложной формы (прием товаров) В этой главе мы рассмотрим технологию создания более сложных форм на примере формы, предназначенной для оформления приема товаров. В качестве источника

Подробнее

Ðàçðàáîòêà êðàñèâûõ ñòðàíèö

Ðàçðàáîòêà êðàñèâûõ ñòðàíèö Ãëàâà 2 Ðàçðàáîòêà êðàñèâûõ ñòðàíèö В этой главе... Внешний вид страницы Три главных принципа веб-дизайна Ошибки дизайна, которых следует избегать Безнаказанное нарушение правил Использование таблиц и

Подробнее

IBM - зарегистрированная торговая марка International Business Machines Corporation.

IBM - зарегистрированная торговая марка International Business Machines Corporation. Информация, содержащаяся в этом документе, может быть изменена без уведомления и не подразумевает обязательств со стороны ADW Software. Программное обеспечение, разработанное ADW Software и описываемое

Подробнее

ФЕСТИВАЛЬ ПЕДАГОГИЧЕСКИХ ИДЕЙ С.Л. ОСТРОВСКИЙ, Д.Ю. УСЕНКОВ. Как сделать презентацию к уроку? «ОТКРЫТЫЙ УРОК»

ФЕСТИВАЛЬ ПЕДАГОГИЧЕСКИХ ИДЕЙ С.Л. ОСТРОВСКИЙ, Д.Ю. УСЕНКОВ. Как сделать презентацию к уроку? «ОТКРЫТЫЙ УРОК» ФЕСТИВАЛЬ ПЕДАГОГИЧЕСКИХ ИДЕЙ «ОТКРЫТЫЙ УРОК» С.Л. ОСТРОВСКИЙ, Д.Ю. УСЕНКОВ Как сделать презентацию к уроку? Первое сентября 2012 Как сделать презентацию к уроку? А зачем? Ключевой вопрос, вынесенный в

Подробнее

Ю Р И Д И Ч Е С К И Е У В Е Д О М Л Е Н И Я

Ю Р И Д И Ч Е С К И Е У В Е Д О М Л Е Н И Я Ю Р И Д И Ч Е С К И Е У В Е Д О М Л Е Н И Я Nuance Communications, Inc., 2006. Все права защищены. По отношению к данному документу полностью и частично запрещены воспроизведение, передача, переписывание,

Подробнее

BlueJ Инструкция по применению

BlueJ Инструкция по применению BlueJ Инструкция по применению Версия 2.0.1 Для BlueJ Версии 2.0.x Майкл Kölling Mærsk Институт Университет Южной Дании Содержание Авторское право М. Kölling Перевод на русский язык А.Васильченко Содержание

Подробнее

FossDoc: Построй свою систему сам 2012 г. 2012 г.

FossDoc: Построй свою систему сам 2012 г. 2012 г. FossDoc: Построй свою систему сам 2012 г. 2012 ООО "Предприятие ФОСС-Он-Лайн". Все права защищены. Без письменного разрешения ФОСС-Он-Лайн никакая часть данной документации не может быть воспроизведена

Подробнее

ИНСТРУКЦИЯ ДЛЯ АВТОРОВ ПО РАБОТЕ В СИСТЕМЕ SCIENCE INDEX

ИНСТРУКЦИЯ ДЛЯ АВТОРОВ ПО РАБОТЕ В СИСТЕМЕ SCIENCE INDEX ИНСТРУКЦИЯ ДЛЯ АВТОРОВ ПО РАБОТЕ В СИСТЕМЕ SCIENCE INDEX Данная инструкция предназначена для авторов научных публикаций, входящих в базу данных Российского индекса научного цитирования (РИНЦ). В инструкции

Подробнее

Организация дистанционного обучения в системе Moodle

Организация дистанционного обучения в системе Moodle МИНИСТЕРСТВО СЕЛЬСКОГО ХОЗЯЙСТВА И ПРОДОВОЛЬСТВИЯ РЕСПУБЛИКИ БЕЛАРУСЬ БЕЛОРУССКИЙ ГОСУДАРСТВЕННЫЙ АГРАРНЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ Кафедра Экономической информатики Организация дистанционного обучения

Подробнее

KMnet Viewer Руководство пользователя

KMnet Viewer Руководство пользователя KMnet Viewer Руководство пользователя Замечания об авторских правах Несанкционированное копирование всего или части этого руководства запрещена. Информация в этом руководстве может быть изменена с целью

Подробнее

Моим близким жене Тамаре и детям Анне и Денису, посвящается.

Моим близким жене Тамаре и детям Анне и Денису, посвящается. 1 2 Моим близким жене Тамаре и детям Анне и Денису, посвящается. Несколько слов о книге Есть такой открытый проект, который называется Arduino. Основа этого проекта базовый аппаратный модуль и программа,

Подробнее

ABBYY FineReader 11. Руководство пользователя. 2011 ABBYY. Все права защищены.

ABBYY FineReader 11. Руководство пользователя. 2011 ABBYY. Все права защищены. ABBYY FineReader 11 Руководство пользователя 2011 ABBYY. Все права защищены. Информация, содержащаяся в этом документе, может быть изменена без предварительного уведомления, и компания ABBYY не берет на

Подробнее

Structure CAD «не только для ОРЛОВ»

Structure CAD «не только для ОРЛОВ» Structure CAD «не только для ОРЛОВ» Начинающий не должен смущаться, если он обнаружит, что у него не хватает предварительных знаний даже для чтения предварительных сведений. П.ХАЛМОШ Графический интерфейс

Подробнее

Встроенные функции Excel и их использование

Встроенные функции Excel и их использование Ч АСТЬ II Встроенные функции Excel и их использование В этой части... Глава 6. Введение в функции Excel Глава 7. Логические, текстовые и информационные функции Глава 8. Работа с числовыми данными Глава

Подробнее

myke@mail.ru, 2:5030/74.42, http://myke.da.ru

myke@mail.ru, 2:5030/74.42, http://myke.da.ru Русский стиль, или Новейшие рекомендации для современных российских электронных типографий М. Ю. Колодин myke@mail.ru, 2:5030/74.42, http://myke.da.ru 1999-11-28, версия 02.10 Аннотация В работе рассматриваются

Подробнее

Никита Культин Лариса Цой

Никита Культин Лариса Цой Никита Культин Лариса Цой Санкт-Петербург «БХВ-Петербург» 2011 УДК 681.3.06 ББК 32.973.26-018.2 К90 К90 Культин, Н. Small Basic для начинающих / Н. Культин, Л. Цой. СПб.: БХВ-Петербург, 2011. 256 с.: ил.

Подробнее

Readiris TM Pro 12 Руководство пользователя

Readiris TM Pro 12 Руководство пользователя Readiris TM Pro 12 Руководство пользователя Readiris TM Pro 12 Руководство пользователя Содержание Авторские права... 1 Раздел 1 Введение в Readiris... 3 Сэкономьте время ручной ввод текста больше не

Подробнее

А. В. Флеров ПРАКТИЧЕСКИЕ И САМОСТОЯТЕЛЬНЫЕ РАБОТЫ В CORELDRAW

А. В. Флеров ПРАКТИЧЕСКИЕ И САМОСТОЯТЕЛЬНЫЕ РАБОТЫ В CORELDRAW МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ САНКТ-ПЕТЕРБУРГСКИЙ НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ УНИВЕРСИТЕТ ИНФОРМАЦИОННЫХ ТЕХНОЛОГИЙ, МЕХАНИКИ И ОПТИКИ А. В. Флеров ПРАКТИЧЕСКИЕ И САМОСТОЯТЕЛЬНЫЕ

Подробнее

AdServer Инструкция для издателей и владельцев сайтов

AdServer Инструкция для издателей и владельцев сайтов AdServer Инструкция для издателей и владельцев сайтов 1 Содержание Вступление.... 5 Доступ к интерфейсу... 5 Основные термины... 5 Как работает наш сервис.... 6 Структура системы.... 6 Глава 1: Доступ

Подробнее

@ Министерство социальной политики Нижегородской области при использовании материалов Net Literacy и Google. Распространение и иное использование

@ Министерство социальной политики Нижегородской области при использовании материалов Net Literacy и Google. Распространение и иное использование Понятный Интернет это девять глав и словарик для того, чтобы компьютер стал вашим хорошим другом. Учебник будет полезен людям старшего поколения, которые изучают компьютер и Интернет самостоятельно или

Подробнее

Приложение 3. Работа с LMS на основе MOODLE

Приложение 3. Работа с LMS на основе MOODLE П3.6. Подготовка тестов Это один из наиболее важных элементов создания курса, поэтому он вынесен в отдельный раздел. Преподаватель может создавать в своем курсе тесты, состоящие из вопросов различного

Подробнее