Визуальный редактор страниц сайта Ucoz
Приветствую, друзья и постоянные подписчики блога!
Теперь мы с вами сегодня займемся пополнением сайта Ucoz новыми страницами и обеспечением доступа к ним с помощью меню.
Для этого на странице инструментов управления материалами имеется кнопка «Добавить страницу».
При ее нажатии отображается окно с инструментами для ввода содержимого страницы и настройки параметров.
Оно очень напоминает знакомое нам окно редактирования страницы, только теперь для ввода содержимого страницы нам предоставляется визуальный редактор Ucoz.
Мы уже использовали его для ввода в редактируемую страницу текста приветствия, сейчас познакомимся с его инструментами поближе, создав новую страницу и наполнив ее содержимым.
Итак, приступим.
Визуальный редактор Ucoz страниц сайта
Создание страницы в визуальном редакторе Ucoz мы начнем с того, что введем в строку «Название страницы» ее название, например «Наша продукция».
Далее выполните такие шаги.
1. Введите в поле содержимого страницы текст — На этой страничке мы познакомим вас с нашей продукцией и предоставляемыми услугами.
2. Выделите введенную строку и выберите из раскрывающегося списка «Размер» строку «Размер 3» для задания более крупного шрифта.
3. Далее, не снимая выделения со строки, щелкните на раскрывающемся списке «Шрифт» и выберите пункт Arial Black.
4. Вставьте в страницу таблицу (чтобы в дальнейшем заполнить ее рисунками и описаниями продукции компании). Нажатием клавиши Enter открываем новую строку под заголовком, далее нажимаем кнопку «Вставка таблицы» (1).
Появится список для выбора количества строк и столбцов создаваемой таблицы.
5. Протяните мышь таким образом, чтобы выбрать три строки и два столбца, и щелкните затем кнопкой мыши на соответствующей ячейке. На поверхности страницы отобразится таблица.
Займемся заполнением таблицы в визуальном редакторе Ucoz содержимым, характеризующим продукцию компании.
В левый столбец мы поместим рисунок, а в правый — его описание.
1. Щелкните внутри верхней левой ячейки таблицы и нажмите кнопку «Изображение» (2). Появится одноименное окно.
2. Нажмите кнопку , справа от поля "Путь. Откроется окно файловый менеджер для выбора и загрузки вставляемого изображения.
3. Щелкните на кнопке «Обзор» и выберите файл подходящего изображения с локального диска компьютера.
Другой вариант — загрузка изображения из Интернета с помощью адреса картинки. Для этого следует установить флажок «Загрузить файл» и ввести URL-адрес файла в отобразившуюся строку.
4. Нажмите кнопку «Загрузить файл». После некоторого промежутка времени, требуемого для загрузки, в таблице окна файлового менеджера отобразится строка загруженного изображения.
5. Выберите изображение щелчком на его строке и вернитесь в окно «Изображение». Приступим к заполнению полей окна.
6. В строку Название введите название изображения, например «Бизнес в сети».
7. В раскрывающемся списке «Выравнивание» можно выбрать вариант обтекания текстом вставленного рисунка. При этом в поле в нижней части окна отображается результат.
Для нас этот параметр не имеет значения, поскольку мы помещаем рисунок в отдельную ячейку таблицы, поэтому оставим данный параметр без изменения.
8. В полях «Ширина» и «Высота» можно задать в пикселах размеры изображения, с которыми оно отобразится на странице. Если оставить поля пустыми, рисунок отобразится в полном размере. Мы же сократим размер рисунка вдвое и зададим значения 180 х 130 рх.
9. В полях Вверх, Низ, Влево, Вправо можно установить отступ содержимого страницы от изображения. Установите в этих полях значение 5.
10. Кнопка «Стиль» рамки позволяет задать рамку для изображения. При ее нажатии открывается окно «Рамка — граница».
11. Выберите в левом поле вариант рельефной рамки (самый нижний пункт списка), в среднем — ширину рамки 7 рх, в правом — Внешняя рамка (название отображается в экранной подсказке при наведении указателя мыши на значок в списке).
12. В поле «Цвет» отображается цвет рамки, и нажатием кнопки «Выбрать» вы можете, отобразив палитру, выбрать желаемый цвет. Мы оставим выбранный по умолчанию белый.
13. Щелкните на кнопке «OK», чтобы вернуться в окно «Изображение», в котором нажимаем кнопку «Вставить». В результате на странице визуального редактора Ucoz появится наше изображение.
Итак, изображение вставлено, но можно заметить, что внутренняя граница столбца с рисунками сдвинулась вправо, то есть ячейка с рисунком расширилась на всю область таблицы.
Это неприемлемо, поэтому займемся настройкой ее свойств. Выберите, если это еще не сделано, ячейку таблицы, щелкнув на ней кнопкой мыши, и нажмите кнопку "Редакт-ть таблицу/ячейку (3) на панели инструментов визуального редактора Ucoz.
В отобразившемся меню щелкните на строке «Редактировать ячейку». Откроется окно «Свойства ячейки».
Выберите для переключателя «Ширина» положение «Фиксир-ая ширина», в поле справа введите 180 и оставьте в открывающемся списке выбора единиц измерения установленное по умолчанию значение пиксели.
В раскрывающемся списке «Применить к» выберите значение «Текущая колонка» и щелкните на кнопке «ок». В результате таблица изменит вид.
Теперь ячейки с рисунками приобрели размер вставляемых рисунков, и мы можем ввести в правые ячейки описание отображаемой в них продукции.
Для этого щелкните на ячейке справа от вставленного рисунка и введите соответствующий текст, например — Вы можете зарабатывать в интернете продавая товары или услуги за определенный процент от продаж.
Этот текст вы можете отформатировать с помощью стандартных средств панели инструментов редактора, например изменить шрифт на Arial и установить «Размер 2».
Можно отредактировать свойства ячейки для отображения текста должным образом, например задать для него выравнивание по вертикали или горизонтали, откорректировать набивку текста (то есть расстояние строки текста до границ ячейки), добавить фон или фоновое изображение.
Для этого щелкните на ячейке с текстом и выберите команду меню «Редакт-ть таблицу/ячейку» на панели инструментов. В отобразившемся меню выберите команду «Редактировать ячейку».
Откроется уже знакомое нам окно «Свойства ячейки», перейдите в нем на вкладку «Свойства».
Как видите, у ячейки довольно много настроек. Чтобы познакомиться с ними, проще всего попробовать изменять значения параметров и щелкать на кнопке «Применить», чтобы просмотреть результат в окне браузера (изображение в окне «Предпросмотр» на эти настройки не реагирует).
Можете сделать следующее.
1. Установите в полях «Выравнивание текста» значения «верх текста» (левое поле) и центр (правое поле).
2. В поля «Набивка» введите значение 6.
3. В разделе «Фон» кнопка «Выбор» позволяет задать с помощью палитры цвет фона ячейки, а кнопка «Изображение» -фоновое изображение (подложку). Воспользуемся последней возможностью.
4. Нажмите кнопку «Изображение», откроется окно «Изображение — подложка».
5. Нажмите кнопку справа от поля «Путь к изображению» и с помощью уже знакомого вам файлового менеджера загрузите какое-либо изображение, которое будет использовано в качестве фонового.
Обычно это небольшой рисунок однородного цвета, повторяемый по всей поверхности ячейки.
6. Остальные параметры в окне управляют распределением фонового рисунка по ячейке.
Список «Повторять» позволяет повторять рисунок по вертикали, горизонтали, в обоих направлениях или отменить повторение.
Переключатель «Гориз. выравн-ние» дает возможность выравнивать фоновое изображение.
Выбор левого положения переключателя позволяет выбрать из раскрывающегося списка выравнивание влево, вправо или по центру, а выбор правого положения — установить позицию фонового изображения, указав его место по горизонтальной оси.
Эту координату вы можете задать либо в пикселах, либо в процентах, в зависимости от выбора единицы в раскрывающемся списке возле переключателя.
Учтите, все эти возможности применимы только при отказе от повторения фонового изображения на поверхности ячейки (заданием соответствующего значения параметру «Повторять»).
Переключатель «Верт. выравн-ние» управляет выравниванием изображения по вертикали и работает аналогично вышеописанному переключателю.
Оставьте без изменения установки по умолчанию и нажмите кнопку «ок».
7. В окне свойств ячейки снова нажмите «ok», чтобы вернуться в окно редактора Ucoz, в котором отобразятся результаты наших настроек.
Аналогичным образом можно заполнить остальные ячейки таблицы, после чего сохранить результат, нажав кнопку «Сохранить» в нижней части окна редактора Ucoz.
Созданная нами страница появится в списке страниц сайта системы Ucoz и станет доступной для просмотра.
