Продолжаем наше знакомство с конструктором сайтов Ucoz.ru. Тема этого урока Редактор страниц. Выполняем обычный вход в Панель управления:
переходим в Админ Панель сайта:
И перед нами открывается первый раздел -"Управление Модулем". Нажимаю на "Редактор страниц":
И здесь могу просто сразу "Добавить страницу" нажимая ссылку справа на верху. Но мы продолжим с раздела "Управление страницами сайта".
Здесь мы видим какие у нас уже имеются страницы. Добавлять страницу не сложно (нажимая на кнопку добавления страниц), но мы пока познакомимся со способами изменения содержания страниц. Перед каждой страницей есть 3 значка: глаз, ключик и крестик -
Они означают:
1. Визуальный режим (с ним и поработаем) 2. HTML режим 3. Удаление страницы
Нам больше понадобится первое. Нажимаю на значок глаза перед Главной страницей:
Название страниц можно менять на нужную нам ключевую фразу. Ниже, простой текстовый редактор, но там уже есть один код (форма). Его я не трогаю, потому что он будет показывать на Главной станице все новости сайта.
$LAST_NEWS$ - код оставляю на месте и ниже начинаю вводить текст.
Добавляю текст, который у меня уже был с прошлого урока (то есть начинаю вводить Контент). Но пока что у нас простой текст, которую нужно оформлять (форматировать). Для этого я выбираю например заголовок статьи (у него фон стал синим) и перевожу в центр страницы нажав кнопку, которая желтая на картинке. Далее я делаю его размер покрупнее, выбирая кегль (размер) №6 ,
и еще придаю ему синий цвет
Таким же образом я могу выбрать и вариант шрифта для текста:
Текст можно сделать Жирным (чтобы подчеркивать его таким образом для посетителей) или обратить внимание поисковых роботов на ключевые фразы:
Часть текста (например Примечания) я превращаю в курсивный текст):
Текст так же можно сделать подчеркнутым:
Вот как стал выглядеть мой текст после всех изменений.
Эти изменения нужно сохранять:
И после смотрю на свой сайт уже в роли посетителя. Вроде текст уже нормальный, но не хватает картинок, роликов и т.д.
Для добавления я продолжаю обработку страницы:
Нажав на кнопку добавить изображение, открывается форма добавления:
Начинаем с выбора Пути к изображению. Нажав на папку напротив поля "Путь", откроется вот такая форма для загрузки изображения с моего конструктора на сайт. Нажав на "Обзор" откроется содержание моего компьютера, откуда я найду и выберу нужную картинку, и нажму на "Загрузить файл". Могу добавить еще, нажав на плюсик, или вставлять ссылку, поставив галочку в квадратике.
Файл появился после загрузки в форме (skype-14.jpg) , и напротив него кнопки для его обработки (можно менять размеры, добавить описание, удалять и т.д. Закончив обработку я просто кликаю двойным кликом на название изображения и он вставится на моем сайте, на том месте, где стаял курсор.
При обработке изображения лучше поставить ему рамки, особенно если Вы собираетесь прикрепить к нему ссылку (выбирайте вид, толщину и цвет рамки).
Продолжаем с первой формой. Добавляем Название изображения. Ниже выбираем "Выравнивание". Я выбрал слева и картинка переместится с середины на лево, а кругом будет расположен текст. Стиль рамки мы выбирали выше, размеры менять не хотим и переходим к Отступу. "Отступ" - это расстояние картинки от текста. Осталось только нажать на "Вставить".
Вот и все. Изображение нашло свое место на странице.
А теперь еще раз повторим процесс прикрепления ссылки к картинкам, на сей раз на примере конструктора Ucoz.ru. Выбираем изображение и нажимаем на значок "Ссылка".
Открылась форма. Из первого списка нас пока что интересует только http// . Далее вводим адрес страницы
Ниже выбираем варианты фрейма (как откроется сайт): Self - ссылка откроется в том же окне, Blank - ссылка откроется в новом окне, Parent - ссылка откроется внутри той же страницы. И нажимаем на "Вставить".
До того как эти изменения сохранять, я хочу добавить еще кое-что. Например виджет соц. закладок. Добавляется так же, как в колонках, но с одной разницей: добавлять будем не форму, а через копирование кода HTML . Выбираю опции: 5 колонок, размер 16 пикселей, все социалки, режим обычный и нажимаю "Получить код"
Копируйте код:
$WIDGET$('45','187|5|0|1|1|ru|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1')?>
Что это такое, понять не нужно. Нам достаточно знать то, что это код той формы, которую мы видели в форме). Вставлять нужно не в визуальном режиме, а в HTML (нажмите ссылку перехода справа на верху). Откроется код страницы, и в самом низу добавляем наш код. Сохраняем и возвращаемся в визуальный режим нажимая на новую ссылку, которая появилась справа на верху.
После сохранения смотрим на свой сайт. Виджет с социалками у нас под текстом внизу страницы.
Посмотрим еще одну страницу, которая по умолчанию было у нас на сайте. Страницу "Обратная связь".
Здесь есть только одна форма, по которой могут с Вами связаться посетители сайта. Вот как она выглядит:
Если Вам с этой формы напишут письмо, то оно придет к Вам на тот почтовый ящик, который Вы указали при регистрации в Ucoz.ru .
Теперь давайте сами добавим одну страницу. Нажали на добавление новой страницы, вели Название, написали текст, предположим добавили все материалы и сохранили.
Новая страницы будет выглядеть так, а его ссылка сама добавиться в Меню сайта в самом конце списка страниц:
Добавление подстраниц. Подстраница, это страницы, которые не видны, пока не наведете мышку на его родительскую страницу или не кликните по родительской странице. Такие страницы в меню показываются под основной (родительской страницей) и являются их разделами.
Я хоть и создал тут под страницу, но реально его превращать из простой страницы в под страницу я буду с конструктора сайта.
Для этого я перехожу в режим конструктора, чтобы обработать Меню сайта. В блоке Меню нажимаю на ключик:
Вижу все страницы. Последняя страница "ПППП" нам совершенно не нужна. Удаляю нажав на крестик. Теперь меняю место страницы Apas-Vital. Вставлю мышку на его названии, появится большой крестик и я его перетащу под Главную страницу.
Страница встала под Главной страницей. Если хочу вложить ее в Главную страницу (превратить ее в подстраницу), ставлю курсор на зеленый крестик и таскаю его на название Главной страницы.
Знак плюса превращается в квадратик (значит мы уже на месте) и отпускаю.
И что поменялосье Закройте конструктор и посмотрите как посетитель. Страницы Апас не видно сразу. Навожу курсор на Главную страницу, выпадает список страниц второго уровня. Теперь могу открыть и эти страницы.
Еще что можно делать в меню ? Обрабатывать пункты на месте: менять названия и адреса страниц, нажимая на карандашик рядом с названием пунктов меню.
Добавлять пункты меню:
Теперь посмотрите на то же Меню внутри Админ Панели. Та же картина.
Теперь вернемся к Редактору страниц и посмотрим что еще там нам необходимо. Например в разделе "Каталог файлов" можно добавлять те файлы, которыми Вы хотите делиться с Вашими партнерами.
Назовите материал:
добавьте описание текстом.
Ниже в форме с помощью обзора выбираю нужный файл, могу добавить альтернативный вариант скачивания файла (например с другого файлоообменика), свои данные, теги (ключевые слова, которые характеризуют наш файл) и опции для данной страницы.
В результате у меня на странице Каталог файлов появился материал, который могут скачать посетители сайта и даже оставлять комментарии.
Возвращаюсь в Админ панель и захожу в следующий раздел: "Управление материалами". Будем добавлять материал в Новостях .
Ввожу как обычно Название материла, описание,
ниже в форме добавляю изображение, теги, выбираю опции и добавляю.
В Новостях у меня появился новый материал про Акции компании.
Далее можете посмотреть раздел Модулей. Так как мы пока что не знаем языка HTML , менять чего то тут мы не будем и перейдем
в раздел Фотоальбом из этого же ряда.
Обычное добавление архивов, с выбором или добавлением категорий.
Собственно все о Редакторе. На следующем уроке мы поговорим о последних разделах Админ панели Ucoz.ru и Вы уже будете полностью готовы делать себе сайты с помощью этого конструктора.