Как создать свой сайт
Блог сайтостроителя

Обучающий курс по сайтостроению и web-дизайну для начинающих Money Master часть 2
Обучающий курс по сайтостроению и web-дизайну для начинающих Money Master часть 2

Рубрика «Вопрос? Ответ!»





Урок№7. Как работать с визуальным редактором сайта на ucoz.ru

В этом уроке Вы узнаете о том, как работать с визуальным редактором сайта на ucoz.ru. Для кого-то работа с визуальным редактором может показаться элементарным, но на сайте webcaum.ru представлены уроки сайтостроения, разработанные специально для новичков, которые впервые сталкиваются с задачей создания и ведения сайта. И именно для начинающих web-мастеров предназначен данный урок.

Итак, в этом уроке Вы узнаете, как делать ссылки в статье, помещать фотографии, менять шрифт текста и его размеры, делать выделения и многое другое, связанное с оформлением страницы сайта.

Проводить работу с сайтом мы будем с помощью браузера Mozilla Firefox. Если у Вас нет данного браузера, то скачайте и установите его у себя на компьютере. Важно использовать именно этот браузер, чтобы потом не возникало вопросов, почему что-то не получается, т.к. в разных браузерах принцип работы с сайтом может отличаться, хоть и не значительно.

Ну, что, приступим? Предлагаю заполнить главную страницу сайта, на примере которой Вы уже потом сможете сами заполнить остальные страницы сайта. Зайдите в админку сайта и перейдите в раздел: Редактор страниц -> Управление страницами сайта.

Управление страницами сайта на ucoz

В данном разделе мы можем редактировать страницы нашего сайта. Обратите внимание на правую крайнюю колонку инструментов управления страницами сайта.

Инструменты управления страницами сайта на ucoz.ru

Вкратце о каждом инструменте:

кнопка в виде глаза — кнопка в виде глаза позволяет редактировать страницу в визуальном редакторе.

кнопка в виде гаечного ключа — кнопка в виде гаечного ключа позволяет редактировать код страницы.

кнопка в виде крестика — кнопка в виде крестика позволяет удалять страницы сайта.

Чтобы отредактировать главную страницу сайта, нажмите справа от названия «Главная страница» на кнопку в виде глаза кнопка в виде глаза. Мы перешли в раздел редактирования содержимого главной страницы сайта. Как видите, панель инструментов визуального редактора сайта очень схожа с панелью инструментов программы Microsoft Word. Давайте добавим текста в содержимое страницы. Среди файлов, которые Вы скачали на странице уроков по созданию сайта на UCOZ, есть файл «главная.txt». Скачайте файлы, если Вы этого ещё не сделали. Откройте файл «главная.txt», скопируйте весь текст и вставьте его в содержимое страницы.

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

Визуальный редактор сайта, сделанного на ucoz.ru

Выделение цветом

Кнопка «Цвет текста» — Кнопка «Цвет текста». Данная кнопка позволяет менять цвет текста. Для этого выделите область текста, где Вы хотите поменять цвет, нажмите на кнопку «Цвет текста» и выберите нужный Вам цвет.

Кнопка «Цвет фона» — Кнопка «Цвет фона» позволяет менять фон вокруг выделенного текста. Также выделяем сначала область текста, нажимаем на кнопку и выбираем нужный нам цвет фона.

Как сделать ссылку

кнопка «Ссылка» — кнопка «Ссылка». С помощью данной кнопки мы можем делать ссылки на другие страницы нашего сайта, а также на страницы других сайтов, если это необходимо. Давайте сделаем несколько ссылок в статье. Для начала я покажу, как делать ссылку на главную страницу сайта. Выделите в первом абзаце адрес сайта http://katalogik.ucoz.ru и нажмите на кнопку кнопка «Ссылка» (Ссылка). Перед нами появится окно, в котором указывается адрес ссылки.

окно, в котором указывается адрес ссылки

Есть 2 способа сделать ссылку на главную страницу:

1-й способ — указать полный адрес сайта. В правое поле мы указываем адрес сайта katalogik.ucoz.ru, в левом поле выбираем схему обращения к ресурсу. Если мы делаем обычную ссылку, то нужно выбрать протокол http://. По такому же принципу делаются ссылки на другие сайты. Например, если мы хотим сделать ссылку на сайт webcaum.ru, то справа мы указываем адрес сайта webcaum.ru, а слева также выбираем http://.

1-й способ сделать ссылку на главную страницу

2-й способ сделать ссылку на главную страницу — это просто в правом поле поставить слеш «/» с наклоном слева-направо. Левое поле, где нужно выбрать протокол, мы оставляем пустым в таком случае. Ещё раз повторюсь: когда мы указываем полный адрес, то в левом поле мы выбираем протокол http://, когда ссылка указывается без полного адреса, то левое поле должно оставаться пустым. Это правило важно всегда соблюдать, иначе ссылки будут некорректно показываться. Мы воспользуемся 2-м способом, поскольку он проще и удобнее.

2-й способ сделать ссылку на главную страницу

Если Вы хотите, чтобы ссылка открывалась в новом окне, то там, где поле «Фрэйм/окно (Target)» выберите: Blank (новое окно).

В поле «Текст» введите название ссылки, в данном случае мы наберём: Белый каталог сайтов. Это всплывающая подсказка, которая будет появляться при наведении курсора мыши на ссылку.

Все значения мы ввели, нажимаем «Вставить», а затем «Ок».

Делаем ссылку на главную страницу

Если Вы хотите исправить ссылку, то нужно выделить всю фразу целиком и нажать на кнопку кнопка «Ссылка» (Ссылка).

Как исправить ссылку

Теперь давайте сделаем ссылку в заголовке «Как добавить сайт в каталог». В предыдущих уроках мы создали уже данную страницу. Зайдите на наш сайт и перейдите в раздел «Как добавить сайт». В верхней строке браузера указана ссылка, которую нам нужно скопировать и указать в заголовке.

Ссылка в строке браузера

Опять же таки, есть два способа сделать ссылку на страницу:

1-й способ — это указать полный адрес ссылки (в моём случае — это katalogik.ucoz.ru/index/kak_dobavit_sajt_v_katalog/0−4) и выбрать протокол http://.

1-й способ сделать ссылку на страницу

2-й способ — это указать неполный адрес ссылки, начиная со слеша «/».

Копируем неполный адрес ссылки, начиная со слеша

В моём случае нужно скопировать ссылку /index/kak_dobavit_sajt_v_katalog/0−4 и затем вставить её в поле «Адрес». Левое поле оставляем пустым.

2-й способ сделать ссылку на страницу

Теперь Вы знаете, как делать ссылки на сайте.

Как вставить изображение в текст

кнопка «Изображение» — кнопка «Изображение» позволяет нам вставлять картинки в текст. Поставьте курсор в самом начале первого абзаца. Нажмите на кнопку кнопка «Изображение» (Изображение). Перед Вами появится окно, где нужно указать ссылку на изображение. Но прежде чем это сделать, необходимо загрузить изображение на сайт. Чтобы загрузить картинку перейдите в папку в верхнем правом углу.

Чтобы загрузить картинку перейдите в папку в верхнем правом углу

Для начала я предлагаю создать отдельную папку для наших картинок. Нажмите кнопку «Создать папку».

Создание папки для загрузки файлов на ucoz.ru

Введите img и нажмите на зелёную галочку, чтобы создать папку.

Создание папки для загрузки файлов на ucoz.ru

Перейдите в созданную папку и нажмите «Обзор». Нам нужно выбрать среди файлов, которые Вы скачали на странице уроков по созданию сайта на ucoz.ru, картинку katalogik.jpg. Загрузите её на сайт.

Загрузка файла на сайт

Чтобы вставить картинку нажмите один раз по её названию.

Чтобы вставить картинку нажмите один раз по её названию

Там, где нужно было прописать путь к картинке, адрес ссылки на неё вставился автоматически.

Чтобы вставить картинку нажмите один раз по её названию

Заполним остальные поля.

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

Выравнивание. Чаще всего, выравнивание устанавливается либо слева, либо справа. Остальные виды выравнивания Вы можете попробовать сами повыбирать. В данном случае мы поместим картинку справа от текста. Выбираем «вправо».

Стиль рамки. Указывать значения стилей рамки мы не будем, но давайте посмотрим, что это такое и для чего это нужно. Нажмите на эту кнопку. В первой колонке мы можем выбрать вид рамки вокруг картинки. Во второй колонке — ширину рамки. В третьей колонке нужно выбрать, с какой стороны должна быть рамка — со всех сторон или с какой-то одной определённой.

Ширину и высоту можно не указывать, но если Вы считаете, что картинка слишком широкая то можно немного уменьшить её ширину и картинка уменьшится, сохранив свои пропорции.

Осталось указать отступы от текста. Установим отступ только слева в 15px.

Все поля мы заполнили, нажимаем «Вставить».

Чтобы вставить картинку нажмите один раз по её названию

Как видите, картинка разместилась справа от текста. Теперь Вы знаете, как загружать и вставлять картинку в тест.

Форматирование текста

Нажав по полю «Абзац», можно выбрать заголовки разных уровней (h1,h2,h3,h4,h5,h6), а также различные форматы текста. Чтобы установить формат заголовка, выделите текст и выберите требуемый размер.

Форматирование текста на ucoz.ru – Абзац

Нажав по полю «Шрифт», можно выбрать для определённой части текста свой шрифт.

Форматирование текста на ucoz.ru – Шрифт

Нажав по полю «Размер», можно выбрать для определённой части текста размер.

Форматирование текста на ucoz.ru – Размер

Выделения

Выделения текста на ucoz.ru – жирный шрифт — выделяет текст жирным шрифтом.

Выделения текста на ucoz.ru – Курсив — выделяет текст курсивом.

Выделения текста на ucoz.ru – Подчёркивание — подчёркивает текст.

Выравнивание текста

Выравнивание текста — данные кнопки выравнивают текст слева, по центру, справа и равномерно по ширине.

Списки

Пронумерованные списки — с помощью этой кнопки можно делать пронумерованные списки.

Пример:

  1. Строка 1
  2. Строка 2
  3. Строка 3

Маркированные списки — с помощью этой кнопки можно делать маркированные списки.

Пример:

  • Строка 1
  • Строка 2
  • Строка 3

Отступы

Отступы — данные кнопки позволяют делать отступы справа и обратно влево.

Теперь Вы знаете, как работать с визуальным редактором сайта на ucoz.ru. Далее Вы уже можете сами оформить весь текст.

Популярность заметки: 8%

Опубликовал admin 21 апреля, 2013 | 5 комментариев | Просмотров: 37,283

Рейтинг заметки:

1 звезда2 звезды3 звезды4 звезды5 звезд (8 голосов, средний: 5.00 из 5)
Loading ... Loading ...

Размещено в рубрике: Сайт на UCOZ

Метки:

Если Вам понравились материалы сайта http://webcaum.ru, и Вы хотите отблагодарить автора данного ресурса, то скопируйте код баннера, который представлен ниже, и вставьте его на любой странице Вашего сайта.

5 комментариев к заметке «Урок№7. Как работать с визуальным редактором сайта на ucoz.ru»

  • Надежда
    14 мая, 2013, 14:55
    Цитировать

    Урок у Вас очень хороший. Спасибо!

    Только у меня одна проблема: нажимаю на «глаз», чтобы отредактировать текст страницы и вижу ПУСТОЕ окно редактора. Текст не отображается. Проверила: когда вставляю в окно новый текст, он вставляется НИЖЕ исходного текста страницы. Помогите!

    Вот параметры моего сайта cleaning-mask.narod.ru

  • admin
    26 мая, 2013, 17:05
    Цитировать

    Цитата:

    Урок у Вас очень хороший. Спасибо!

    Только у меня одна проблема: нажимаю на «глаз», чтобы отредактировать текст страницы и вижу ПУСТОЕ окно редактора. Текст не отображается. Проверила: когда вставляю в окно новый текст, он вставляется НИЖЕ исходного текста страницы. Помогите!

    Вот параметры моего сайта cleaning-mask.narod.ru

    Возможно, что там, где пустое поле, есть HTML-код и поэтому этот код смещает текст вниз. Нажмите на «Панель HTML кодов», и Вы увидите код страницы. Есть ли там код перед текстом, который Вы выкладываете?

  • Родионенко Ирина
    26 февраля, 2014, 15:58
    Цитировать

    Большое спасибо за Ваши уроки!

    Прочла все семь уроков, почти ничего не знала о Каталоге Сайтов. Работать с HTML кодами еще боюсь (в прошлом я программист). Спасибо огромное.

  • Наталья
    12 марта, 2014, 2:08
    Цитировать

    Здравствуйте! А как сделать ссылку на файл, залитый в файловый менеджер?

  • admin
    12 марта, 2014, 18:56
    Цитировать

    Цитата:

    Здравствуйте! А как сделать ссылку на файл, залитый в файловый менеджер?

    Указывайте ссылку следующего вида:

    /путь_к_файлу/название_файла.расширение

    Например, если файл file.pdf находится в папке documents, то относительная ссылка на файл выглядит так:

    /documents/file.pdf

    После этого, когда пользователь кликает по такой ссылке, перед ним открывается окно, где нужно выбрать куда скачать файл.

Внимание! На данный момент возможность комментирования на сайте закрыта по причине нехватки времени у автора отвечать на вопросы посетителей сайта. Как только у автора блога появится время, форма с отправкой комментариев обязательно будет установлена обратно.

© 2011 Все права защищены законодательством РФ.
Автор разрешает использовать материалы сайта только при одном условии – на страницу сайта webcaum.ru, от куда был скопирован материал (или частично скопирован), должна быть проставлена индексируемая ссылка Поднять страницу вверх