В этом уроке Вы узнаете о том, как работать с визуальным редактором сайта на ucoz.ru. Для кого-то работа с визуальным редактором может показаться элементарным, но на сайте webcaum.ru представлены уроки сайтостроения, разработанные специально для новичков, которые впервые сталкиваются с задачей создания и ведения сайта. И именно для начинающих web-мастеров предназначен данный урок.
Итак, в этом уроке Вы узнаете, как делать ссылки в статье, помещать фотографии, менять шрифт текста и его размеры, делать выделения и многое другое, связанное с оформлением страницы сайта.
Проводить работу с сайтом мы будем с помощью браузера Mozilla Firefox. Если у Вас нет данного браузера, то скачайте и установите его у себя на компьютере. Важно использовать именно этот браузер, чтобы потом не возникало вопросов, почему что-то не получается, т.к. в разных браузерах принцип работы с сайтом может отличаться, хоть и не значительно.
Ну, что, приступим? Предлагаю заполнить главную страницу сайта, на примере которой Вы уже потом сможете сами заполнить остальные страницы сайта. Зайдите в админку сайта и перейдите в раздел: Редактор страниц -> Управление страницами сайта.
В данном разделе мы можем редактировать страницы нашего сайта. Обратите внимание на правую крайнюю колонку инструментов управления страницами сайта.
Вкратце о каждом инструменте:
— кнопка в виде глаза позволяет редактировать страницу в визуальном редакторе.
— кнопка в виде гаечного ключа позволяет редактировать код страницы.
— кнопка в виде крестика позволяет удалять страницы сайта.
Чтобы отредактировать главную страницу сайта, нажмите справа от названия «Главная страница» на кнопку в виде глаза . Мы перешли в раздел редактирования содержимого главной страницы сайта. Как видите, панель инструментов визуального редактора сайта очень схожа с панелью инструментов программы Microsoft Word. Давайте добавим текста в содержимое страницы. Среди файлов, которые Вы скачали на странице уроков по созданию сайта на UCOZ, есть файл «главная.txt». Скачайте файлы, если Вы этого ещё не сделали. Откройте файл «главная.txt», скопируйте весь текст и вставьте его в содержимое страницы.
Предлагаю разобраться с основными кнопками в панели редактирования текста, которые чаще всего используются в работе. Все кнопки мы рассматривать не будем, т.к. их достаточно много. Если Вам интересно изучить всю панель, то Вы можете навести курсор на любую кнопку, и в этом месте появится подсказка, которая показывает краткую информацию о ней.
Выделение цветом
— Кнопка «Цвет текста». Данная кнопка позволяет менять цвет текста. Для этого выделите область текста, где Вы хотите поменять цвет, нажмите на кнопку «Цвет текста» и выберите нужный Вам цвет.
— Кнопка «Цвет фона» позволяет менять фон вокруг выделенного текста. Также выделяем сначала область текста, нажимаем на кнопку и выбираем нужный нам цвет фона.
Как сделать ссылку
— кнопка «Ссылка». С помощью данной кнопки мы можем делать ссылки на другие страницы нашего сайта, а также на страницы других сайтов, если это необходимо. Давайте сделаем несколько ссылок в статье. Для начала я покажу, как делать ссылку на главную страницу сайта. Выделите в первом абзаце адрес сайта http://katalogik.ucoz.ru и нажмите на кнопку (Ссылка). Перед нами появится окно, в котором указывается адрес ссылки.
Есть 2 способа сделать ссылку на главную страницу:
1-й способ — указать полный адрес сайта. В правое поле мы указываем адрес сайта katalogik.ucoz.ru, в левом поле выбираем схему обращения к ресурсу. Если мы делаем обычную ссылку, то нужно выбрать протокол http://. По такому же принципу делаются ссылки на другие сайты. Например, если мы хотим сделать ссылку на сайт webcaum.ru, то справа мы указываем адрес сайта webcaum.ru, а слева также выбираем http://.
2-й способ сделать ссылку на главную страницу — это просто в правом поле поставить слеш «/» с наклоном слева-направо. Левое поле, где нужно выбрать протокол, мы оставляем пустым в таком случае. Ещё раз повторюсь: когда мы указываем полный адрес, то в левом поле мы выбираем протокол http://, когда ссылка указывается без полного адреса, то левое поле должно оставаться пустым. Это правило важно всегда соблюдать, иначе ссылки будут некорректно показываться. Мы воспользуемся 2-м способом, поскольку он проще и удобнее.
Если Вы хотите, чтобы ссылка открывалась в новом окне, то там, где поле «Фрэйм/окно (Target)» выберите: Blank (новое окно).
В поле «Текст» введите название ссылки, в данном случае мы наберём: Белый каталог сайтов. Это всплывающая подсказка, которая будет появляться при наведении курсора мыши на ссылку.
Все значения мы ввели, нажимаем «Вставить», а затем «Ок».
Если Вы хотите исправить ссылку, то нужно выделить всю фразу целиком и нажать на кнопку (Ссылка).
Теперь давайте сделаем ссылку в заголовке «Как добавить сайт в каталог». В предыдущих уроках мы создали уже данную страницу. Зайдите на наш сайт и перейдите в раздел «Как добавить сайт». В верхней строке браузера указана ссылка, которую нам нужно скопировать и указать в заголовке.
Опять же таки, есть два способа сделать ссылку на страницу:
1-й способ — это указать полный адрес ссылки (в моём случае – это katalogik.ucoz.ru/index/kak_dobavit_sajt_v_katalog/0-4) и выбрать протокол http://.
2-й способ — это указать неполный адрес ссылки, начиная со слеша «/».
В моём случае нужно скопировать ссылку /index/kak_dobavit_sajt_v_katalog/0-4 и затем вставить её в поле «Адрес». Левое поле оставляем пустым.
Теперь Вы знаете, как делать ссылки на сайте.
Как вставить изображение в текст
— кнопка «Изображение» позволяет нам вставлять картинки в текст. Поставьте курсор в самом начале первого абзаца. Нажмите на кнопку (Изображение). Перед Вами появится окно, где нужно указать ссылку на изображение. Но прежде чем это сделать, необходимо загрузить изображение на сайт. Чтобы загрузить картинку перейдите в папку в верхнем правом углу.
Для начала я предлагаю создать отдельную папку для наших картинок. Нажмите кнопку «Создать папку».
Введите img и нажмите на зелёную галочку, чтобы создать папку.
Перейдите в созданную папку и нажмите «Обзор». Нам нужно выбрать среди файлов, которые Вы скачали на странице уроков по созданию сайта на ucoz.ru, картинку katalogik.jpg. Загрузите её на сайт.
Чтобы вставить картинку нажмите один раз по её названию.
Там, где нужно было прописать путь к картинке, адрес ссылки на неё вставился автоматически.
Заполним остальные поля.
В поле «Название» введите: Белый каталог сайтов. Это будет замещающий текст к картинке, который будет показываться в случае, если картинка по каким-то причинам не будет отображаться.
Выравнивание. Чаще всего, выравнивание устанавливается либо слева, либо справа. Остальные виды выравнивания Вы можете попробовать сами повыбирать. В данном случае мы поместим картинку справа от текста. Выбираем «вправо».
Стиль рамки. Указывать значения стилей рамки мы не будем, но давайте посмотрим, что это такое и для чего это нужно. Нажмите на эту кнопку. В первой колонке мы можем выбрать вид рамки вокруг картинки. Во второй колонке – ширину рамки. В третьей колонке нужно выбрать, с какой стороны должна быть рамка – со всех сторон или с какой-то одной определённой.
Ширину и высоту можно не указывать, но если Вы считаете, что картинка слишком широкая то можно немного уменьшить её ширину и картинка уменьшится, сохранив свои пропорции.
Осталось указать отступы от текста. Установим отступ только слева в 15px.
Все поля мы заполнили, нажимаем «Вставить».
Как видите, картинка разместилась справа от текста. Теперь Вы знаете, как загружать и вставлять картинку в тест.
Форматирование текста
Нажав по полю «Абзац», можно выбрать заголовки разных уровней (h1,h2,h3,h4,h5,h6), а также различные форматы текста. Чтобы установить формат заголовка, выделите текст и выберите требуемый размер.
Нажав по полю «Шрифт», можно выбрать для определённой части текста свой шрифт.
Нажав по полю «Размер», можно выбрать для определённой части текста размер.
Выделения
— выделяет текст жирным шрифтом.
— выделяет текст курсивом.
— подчёркивает текст.
Выравнивание текста
— данные кнопки выравнивают текст слева, по центру, справа и равномерно по ширине.
Списки
— с помощью этой кнопки можно делать пронумерованные списки.
Пример:
- Строка 1
- Строка 2
- Строка 3
— с помощью этой кнопки можно делать маркированные списки.
Пример:
- Строка 1
- Строка 2
- Строка 3
Отступы
— данные кнопки позволяют делать отступы справа и обратно влево.
Теперь Вы знаете, как работать с визуальным редактором сайта на ucoz.ru. Далее Вы уже можете сами оформить весь текст.