Как сделать кнопку ucoz

База знаний uCoz

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

В этой инструкции показано, как создать свою кнопку.

Обычная кнопка

Выглядит это следующим образом:

Кнопка с фоновым изображением

Если у вас есть изображение кнопки, то его можно использовать в обычной ссылке, например так:

Выглядит это следующим образом:

Чтобы получить такой результат, нужно сделать две вещи:

Кнопка на CSS

Кнопку можно оформить с помощью CSS. Для этого добавьте стили в шаблон сайта и укажите класс кнопки.

Добавьте в разделе Панель управления / Дизайн / Редактор / CSS:

Тогда HTML-код самой кнопки будет следующим:

А на сайте кнопка отобразится так:

Не пугайтесь, если CSS кажется вам незнакомым и странным. Чтобы настроить кнопку под свои нужды, достаточно изменить отступы / размер шрифта в пикселях и цвет фона / текста в HEX (чтобы посмотреть все цвета, наберите в Яндексе запрос «hex цвета онлайн»).

Ваша кнопка на других сайтах

В некоторых случаях есть необходимость давать пользователям возможность устанавливать вашу кнопку на своих сайтах. Если предоставите готовый HTML-код кнопки, то они без труда смогут это сделать. Для этого нам потребуется создать текстовое поле и поместить внутрь него готовый код. Каждый тип кнопки будет иметь свой код:

Кнопка с фоновым изображением

Установка кнопки на сайт

Теперь необходимо добавить код кнопки на свой сайт. Это удобно делать с помощью конструктора:

Добавьте код кнопки в блок:

Добавьте поле с кодом, а также CSS, если требуется. Сохраните изменения внесенные в конструкторе.

Источник

База знаний uCoz

17 марта 2014 года произошло обновление визуального редактора материалов:

Навигация по инструкции:

Ответы на частые вопросы

В: Меня совершенно не устраивает новый редактор и я во что бы то ни стало хочу вернуть старый теплый ламповый редактор, как мне это сделать?

В: Мне совершенно не нравится, что новый редактор добавляет форматирование при помощи тега p, это добавляет лишние отступы, как это убрать?

О: Тег p (абзац) как раз предназначен для форматирования текста, его применение логично и правильно. Да, отступы стали больше, но это тоже нормально и логично. Если вам они очень мешают, то опция «Для перевода строк использовать тег
вместо

В: В новом редакторе у меня пропал режим BB-кодов, почему?

О: Во время работы над новым редактором был немного исправлен анализ прав групп. Скорее всего, в панели управления сайтом в настройках прав групп для данного модуля у вас отсутствуют права на добавление BB-кодов. Поставьте там галочку и все вернется на свои места.

Работа с картинками

При вставке картинки в визуальный редактор появляется окно «Свойства изображения» с двумя вкладками: Данные об изображении и Ссылка:

Данные об изображении

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

Ссылка

Эта вкладка заполняется в том случае, если картинка будет использоваться как ссылка.

Вот так будет выглядеть добавленная картинка в визуальном редакторе:

От этого не поменяется

Сейчас картинка располагается слева от текста

и красиво смотрится в большом тексте, благодаря обтеканию.

FAQ

В: Как изменить цвет границы у картинки?

О: Для того, чтобы изменить цвет границы нужно после вставки картинки в визуальный редактор выделить ее, нажать на кнопку

(Цвет текста) и выбрать цвет границы.

В: Как перемещать картинку и сделать ее по центру?

Работа с текстом

Абзац, Перенос строки, Красная строка (Добавить отступы), Убрать красную строку (Убрать отступы), Нумерованный список, Маркированный список, Полужирный, Курсив, Подчеркнутый, Зачеркнутый, Подстрочный индекс, Надстрочный индекс, По левому краю, По центру, По правому краю, Специальные символы.

Исходный HTML-код выглядит следующим образом:

Добавление текста в новый визуальный редактор

Следующий абзац (Enter) Перенос строки (Shift+Enter)

Также можно начинать новый абзац с красной строки

Следующий абзац начинается с красной строки (с отступом), но отступ легко убирается

Еще можно выделять в тексте нужную и ненужную информацию и работать с формулами: H₂O и x 2 +2x-1=0

Заголовки, Шрифт, Размер, Цвет, Цитата

Исходный код:

Разнообразить скучный текст красивыми
Ц
В
Е
Т
А
М
И и ШРИФТАМИ очень легко

Заголовок 1 h1

Заголовок 2 h2

Если вам не понравилось то, как вы форматировали текст (изменили шрифт, цвет, размер и т.д.), то вы можете выделить этот текст и нажать на кнопку «Убрать форматирование»

Вы можете использовать кнопку «Вставить только текст», когда вставляете текст из любого текстового редактора. При вставке текста из текстового редактора Word можно использовать кнопку

«Вставить из Word», которая помогает избавиться от лишнего «мусора» при вставке текста.

Специальные символы

Вставка специальных символов позволяет использовать дополнительные символы в тексте. В HTML предопределено большое количество спецсимволов. Ознакомится со всеми можно на странице Мнемоники в HTML

FAQ

В: В новый визуальный редактор не вставляется текст, нельзя скопировать и вырезать текст. Что делать?

О: Настройки безопасности вашего браузера не разрешают редактору напрямую обращаться к буферу обмена. Поэтому используйте сочетание клавиш: Вставить (Ctrl/Cmd+V), Скопировать (Ctrl/Cmd+С), Вырезать (Ctrl/Cmd+X).

Работа со ссылками

После нажатия на иконку добавления ссылки вы увидите окно, в котором 3 вкладки: Информация о ссылке, Цель и Дополнительно

Информация о ссылке

Дополнительно

HTML код добавленной ссылки:

Примечание: Можно сначала написать название ссылки, выделить его, а потом нажать на кнопку «Вставить ссылку»

Редактирование/Удаление ссылки

Для того, чтобы удалить или изменить ссылку кликните по ней правой кнопкой мыши

Удалить ссылку можно и с помощью иконки в визуальном редакторе Убрать ссылку. Кликните левой кнопкой мыши по ссылке, которую хотите удалить, а потом нажмите на кнопку Убрать ссылку, которая станет активной.

Якоря

Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке. Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу. Например, якоря использовались при написании данной инструкции по обновленному визуальному редактору (Навигация по инструкции).

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

Теперь нужно создать ссылку для перехода к якорю

Якорь создан!

HTML-код текста с якорем:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque varius diam in lacus sollicitudin faucibus. Quisque scelerisque lacus et orci pretium malesuada. Cras pharetra eros eu erat consequat condimentum.

Nunc nulla odio, dignissim sit amet consequat id, consectetur eu enim. Duis elementum mauris ut ante pellentesque laoreet. Ut porttitor, risus et sodales eleifend, elit tellus placerat leo, tempus fringilla massa elit et arcu.

Удалить/изменить якорь

Для того, чтобы удалить или изменить якорь нужно кликнуть по красному флажку правой кнопкой мыши и выбрать соответствующий пункт меню

Работа с таблицами

Для того, чтобы создать таблицу в визуальном редакторе нужно нажать на иконку «Таблица»

После заполнения нужных полей получаем пустую таблицу:

Которую можно заполнять:

HTML код созданной таблицы:

Заголовок таблицы

Заголовок столбца1	Заголовок столбца2
Данные столбца1	Данные столбца2
Данные столбца1	Данные столбца2

Для того, чтобы редактировать таблицу (добавлять/удалять/объединять ячейки, колонки, строки и т.д.) нужно нажать по таблице правой кнопкой мыши:

Свойства ячейки

Работа с Flash

Flash. После появляется окно Свойства Flash с тремя вкладками: Основное, Свойства и Дополнительно:

Основное

Свойства

Дополнительно

Так будет выглядеть вставленный в редактор Flash:

Для того, чтобы внести изменения нужно кликнуть по добавленному Flash правой кнопкой мыши и выбрать «Свойства Flash»

Добавление видео с YouTube

Добавить видео с сайта YouTube в визуальный редактор можно двумя способами через вставку HTML- кода или ссылки на видео.После нажатия в визуальном редакторе на иконку(Вставить YouTube видео) появляется такое окно:

1 способ. Вставка HTML-кода

Под видео на сайте YouTube нажмите Share (Поделиться), затем Embed (Вставить)

Скопируйте сгенерированный код и вставьте его в первое поле:

2 способ. Вставка адреса видео (URL)

Скопируйте из адресной строки браузера ссылку на видео:

Ссылка на видео вставляется во второе поле:

Можно так же указать желаемую Ширину и Высоту в пикселях.Так будет выглядеть вставленное в редактор видео с YouTube:

Дополнительные функции

Отменить/Повторить

Кнопки «Отменить» и «Повторить» используются для отмены, либо повтора предыдущего действия. Например, если вы случайно удалили абзац текста, то его можно вернуть нажатием кнопки «Отменить». Аналогом этой функции является сочетание горячих клавиш Ctrl/cmd + Z

Иcточник

Кнопка «Источник» используется для того, чтобы просмотреть исходный html-код добавляемого материала, а также для внесения изменений в html-код.

Источник

Как сделать кнопку ucoz

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

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

Рекомендую почитать:
Как поменять адрес сайта на ucoz Всего за 200р.

В общем сегодня я покажу как установить социальные кнопки на сайт ucoz, а так-же поменяем названия у просмотров и у вывода даты, ну и у того кто добавил игру. Снесём код который выводит количество комментариев от стандартной формы, а на его место вставим социальные кнопки.

Картинка:

Сейчас у нас за место просмотров слово View, за место имени кто добавил игру слово Added by, а за место слова дата, английское слово Data. Вот мы их и изменим.

На следующей странице в разделе онлайн игры выберите строчку:

Как обычно откроется страница с кодом. В коде нужно отыскать 34 строчку на которой как раз и будет то что мы ищем. У вас это может быть другая строчка, ориентируйтесь по коду.

Все слова которые я отметил стрелочками я поменяю на Просмотры, На Добавил, и на Дата. После сохраню документ.

Давайте посмотрим что получилось на сайте.

Всё работает так как я и задумал. Следующим шагом снесём слово Comments 0, которое вы можете наблюдать в правом углу на той-же строчке.

Всё что я выделил мышкой смело можете удалять, это и есть наш код с комментариями. Если сохранить документ и перейти на страницу с игрой, обновить её, вы увидите что слово Comments пропало. Теперь на его место мы установим социальные кнопки.

Ищем социальные кнопки в интернете

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

Мне нравится сервис яндекса, которым я пользуюсь.

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

Последний этап, скопируйте получившийся код.

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

Вот что должно получится:

Сохраните документ и вернитесь на сайт что-бы посмотреть что получилось в результате.

У меня вот что:

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

Источник

Как сделать кнопку ucoz

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

Рекомендую почитать:
Как поменять адрес сайта на ucoz Всего за 200р.

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

Каждым блоком можно управлять и настраивать под себя. К примеру можно блок поставить выше или ниже в колонке, так-же каждому блоку можно поменять название, блоки можно удалять, добавлять новые, редактировать имеющиеся.

Всё это позволяет сделать конструктор на сайте, его нужно просто включить. Что-бы включить конструктор на сайте, нажмите на колёсико и найдите иконку управление дизайном.

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

Что за кнопки?

Давайте разберёмся что за кнопки находятся на каждом блоке. У блока который выделен синей рамочкой (на картинке ниже), имеются следующие кнопки. Кнопки под номером 1 и 2, помогают блок опускать и поднимать в верх.

Также где стоит номер 3, можно ухватить блок мышкой и перетащить его на нужное место. Если нажать на имя блока, можно поменять название у блока, стрелочка под номером 4. Кнопочка под номером 5, помогает управлять меню, заметьте что такая кнопочка находится только у меню, у остальных блоков её нет.

Кнопочка под номером 6 помогает настраивать блок, и управлять его содержимым. Что-бы удалить блок, воспользуйтесь крестиком, кнопочка под номером 7.

Как было уже сказано выше, блоки на ucoz можно удалять и добавлять. Удалять вы уже научились, а вот как добавить блок? Всё очень просто, помнете нашу кнопочку которую мы нашли в колёсике, иконка под названием управление дизайном? Так вот, если на неё нажать повторно, выпадет окно в котором есть кнопочка добавить блок.

Нажмите на неё, блок должен появится посередине странице. Дайте ему название. После ухватите блок мышкой, как описано выше под стрелочкой 3, и перетащите его в то место, где хотите что-бы он стоял. Если блок припарковали, работа ещё не окончена, блок нужно наполнить, он ещё пустой и в нём нету содержимого.

Делается это довольно просто, для начало нажмите на кнопку под номером 6, смотрите на картинке выше. Должно открыться окно, в котором найдёте кучу кнопок, они-то и помогут нам наполнить наш блок.

Кнопки под номерами 1,2,3, помогают переключатся между вкладками.

У каждой вкладке свои задача, к примеру вкладка под номером 1, содержит в себе содержание стандартных функций для сайта. Вкладка под номером 2, помогает вставить свой собственный код, а под номером 3 позволяет управлять доступом для блока.

Для начало разберёмся в кладке под номером 1. В этой вкладке само много кнопочек, кнопочка под номером 4, помогает вставить виджеты для сайта. Если нажать на эту иконку, откроется дополнительное окно в котором можно выбрать нужный виджет.

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

Следующая кнопочка под номером 5, помогает вставить на сайт разные гаджеты. Так-же перейдите по этой кнопке и у вас откроется окно, в которой 700 с чем-то страниц разных гаджетов. От простого радио для сайта и до карт от яндекса, поиска википедии и разных других гаджетов которые можно найти в этом окне. Картинку давать не буду.

Кнопочка под номером 6 помогает в блок вставить видео с ютубе, просто перейдите по ней, и указываете ссылку на видео от ютуба, сохраняем и проверяем. Всё то-же самое с кнопочкой 7, только за место видео вставляйте аудио, уже со своего сайта.

Иконка под номером 8, помогает вставить информеры на ваш сайт. Если вы ещё не знаете что такое информер, в дальнейших уроках мы разберёмся что это такое, и как они работают.

К примеру, когда человек читает новость на вашем сайте, ему под новостью показываются другие новости по той-же теме, это можно сделать при помощи информера.

9 кнопка помогает настроить rss ленту, то-есть в блоке будет подгружаться информация из других сайтов. Лично я не настраивал ленту, так-что не знаю как с ней работать.

В 10 иконке, можно добавлять элементы сайта, такие как вход на сайт, категории для сайта, категория каналов, поиск по сайту и другие элементы. Заметьте что появилась 4 вкладка в окне, она позволяет вернутся назад к содержимому окна.

11 кнопка помогает так-же вставлять разные элементы на сайт, такие как архив записей, календарь, поиск по сайту, облако тегов и категории. Хотя чем они отличаются от предыдущей кнопки непонятно. 12 кнопка помогает вставлять в сайдбар меню для сайта, как это делается мы подробно разбирались вот в этой записи.

Смотрите в видео. Последняя кнопка под номером 13, помогает вставлять баннера на сайт. Перед тем как вставить баннер на сайт, его нужно настроить в панели управления, на главной странице в разделе Ротатор баннеров.

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

Разбираем HTML вкладку

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

Вкладка под номером 3

Данная вкладка помогает нам устанавливать права доступа для нашего блока. Вы можете этот блок показывать определённым группам и в определённых разделах на сайте.

К примеру, если вы не хотите что-бы блок был виден гостям, просто снимите галочку напротив слова гости, и сохраните блок. Посетители которые будут заходить на сайт без авторизации, не будут видеть данный блок, всем остальным группам он будет показываться.

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

Ну и самое интересное, после того как мы создали свой блок, выбрали для него место, наполнили содержимым, нажали кнопку крестик под номером 14, у нас настройка блока завершилась, но мы обнаружили что до-сих-пор находимся в разделе конструктор сайта, как из него выйти?

Всё очень просто, помните нашу кнопочку под названием управления дизайном?

Так вот нажмите на неё, должно как обычно выпасть окно, в котором найдёте 3 кнопки. Если нажать на кнопку отключить конструктор, кнопка под номером 1, тогда мы выйдем из конструктора, но всё что мы настраивали у блоков потеряется, и тогда придётся настраивать всё заново. Так-что кнопка под номером 2, нам подойдёт больше.

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

Источник