Как вставить на ucoz свою шапку для сайта

Вы можете перейти в категорию:
Вопросы по системе uCoz
Регистрация и начало работы
Регистрация доменов (uCoz Domain)
Платные услуги
Раскрутка сайта / SEO
Проблемы с доступностью сайта
Безопасность аккаунта
Вопросы по дизайну
Общие вопросы по системе
Дополнительные функции
SMS-сервисы
PHP и API
Управление аккаунтом
Переезд с Narod.Ru
Соц-бар

или

Модули
Видео
Гостевая книга
Доска объявлений
Интернет Магазин
Модули-каталоги
Новости сайта и блог
Опросы
Пользователи
Почтовые формы
Редактор страниц
SEO-модуль
Тесты
Форум
Фотоальбомы
FAQ

 

2. Как и где можно сменить иконку браузера favicon.ico? Ответ: По умолчанию для всех сайтов системы устанавливается стандартная иконка favicon.ico, отображающаяся в адресной строке браузера. Для ее изменения достаточно закачать собственное изображение в корень FTP или файлового менеджера. Традиционно использовались изображения размера 16×16 пикселей формата ICO, под именем favicon.ico

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

Ответ: Для добавления такого блока достаточно активировать соответствующую функцию в разделе «Общие настройки» в панели управления: Панель управления → Настройки → Общие настройки: Активировать функцию “Кто Онлайн”.
  Как вставить на ucoz свою шапку для сайта
Также не забудьте добавить в шаблон следующий код: $ONLINE_COUNTER$ и $ONLINE_USERS_LIST$. Сделать это вы можете в разделе управления дизайном: Панель управления → Дизайн → Управление дизайном (Шаблоны).
4. Как заменить стандартные надписи «Мой сайт», «Site Logo» на сайте? Ответ: Мы позаботились о том, чтобы процесс замены нужных блоков ни у кого не вызывал сложностей. Все, что необходимо для этого сделать – поменять надписи на желаемые в соответствующем разделе: Панель управления → Дизайн → Управление дизайном: Быстрая замена.
Как вставить на ucoz свою шапку для сайта Для этого необходимо ввести заменяемое словосочетание в поле замены и указать надпись, которой вы хотели бы его заменить. Как вставить на ucoz свою шапку для сайта
5. Не сохраняются шаблоны и настройки, выдает ошибку. Как исправить? Ответ: Возможные проблемы:

  • Если версия вашего браузера Internet Explorer ниже 5.5 или Opera ниже 8.0.1, вам потребуется обновить его или установить новый браузер;
  • Если с версией браузера все в порядке, следует очистить кэш (временные файлы) браузера. Для очистки кэша в IE нужно зайти в его свойства и нажать на кнопку «Удалить файлы». Очистка кэша в прочих браузерах осуществляется в настройках. Внимание: не путайте временные файлы с cookies (это разные вещи);
  • Если вы используете сервисы для экономии трафика, например, Traffic Compressor, рекомендуем вам отключить их. При работе данные сервисы могут выдавать различные IP-адреса – это приводит к срабатыванию защиты “Привязка к IP”, из-за чего и возникает проблема;
  • Проблемы могут вызвать и другие программы, например, файрвол (межсетевой экран), блокирующий передачу больших постов. Попытайтесь поэтапно установить проблему, вызывающую ошибку.
Ответ: Глобальные блоки существенно облегчают работу над дизайном сайта. Используя их, вы сможете работать и вносить изменения, распространяющиеся сразу на весь сайт.
В системе не предусмотрен многократный вывод одного блока на одной странице. Также следует учитывать, что в глобальных блоках работают все коды, актуальные для шаблонов, но не работают прочие глобальные блоки.
7. Можно ли создать более 10 глобальных блоков? Ответ: Изначально в системе существует 4 глобальных блока: верхний, нижний, первый и второй контейнеры. Дополнительно вы можете создать еще 6 глобальных блоков. Общее количество блоков не может превышать 10-ти.
9. Что такое визуальный редактор шапки и как им пользоваться? Ответ: Редактор шапки – инструмент, позволяющий пользователям менять шапку сайта. С его помощью вы можете загрузить текст или изображение всего в несколько кликов, не работая с HTML и CSS-кодом.
Для работы с редактором шапки необходимо зайти на сайт в режиме “Конструктор”. Если вы еще не активировали возможность использования конструктора, то сделать это вы можете в настройках панели управления сайтом: Панель управления → Настройки → Общие настройки: Использовать конструктор для управления дизайном сайта.
Как вставить на ucoz свою шапку для сайта
После этого, войдя на сайт под учетной записью администратора, в админ-баре вы сможете активировать конструктор.
Как вставить на ucoz свою шапку для сайта
Теперь в режиме конструктора вам будет также доступен и визуальный редактор шапки (при условии, что выбранный вами шаблон поддерживает режим редактора шапки, часть старых системных шаблонов не имеют такой опции).
Как вставить на ucoz свою шапку для сайта
Узнать подробнее о визуальном редакторе шапки вы можете в нашем блоге.
Если у вас не отображается ссылка на конструктор в админ баре на сайте, вам следует проделать следующее: Панель управления → Пользователи → Группы пользователей → Установка прав для всех групп → Разное → Редактировать дизайн сайта: установите выделение в чекбокс ☑ и сохраните внесенные изменения.
Как вставить на ucoz свою шапку для сайта
Детальнее ознакомиться с решением вы можете на нашем форуме.
12. Что такое визуальный редактор и какие существуют визуальные редакторы? Ответ: Для работы с сайтом в системе вам предлагается несколько инструментов:

  • Конструктор, позволяющий работать непосредственно со страницами сайтами в окне браузера;
  • Редактор, позволяющий работать как с HTML- и CSS-кодом страниц, так и с кодом системы uCoz (рядом переменных, отвечающих за различные функции);
  • Визуальный редактор, предназначенный для работы с содержимым сайта без использования языков программирования.

Используемый в системе uCoz WYSIWYG-редактор – это визуальный редактор, отображающий содержание в схожей с конечным видом форме. Основная задача редактора – максимально упростить процесс работы с сайтом для людей, не имеющих познаний в тех или иных языках программирования.
Тем не менее, мы настоятельно не рекомендуем использовать визуальный редактор, так как в некоторых случаях генерируемый им код может некорректно отображаться браузерами.
Узнать больше о работе с шаблоном с помощью визуального редактора вы можете в этой инструкции.

13. Что такое резервное копирование шаблонов и как им пользоваться? Ответ: Система uCoz обладает функционалом, необходимым для осуществления резервного копирования. С его помощью можно создать не только полную копию сайта, но и резервную копию шаблона.
Для ее создания необходимо зайти в следующий раздел: Панель управления → Дизайн → Резервное копирование шаблонов: Создать резервную копию.Как вставить на ucoz свою шапку для сайта Для восстановления необходимой резервной копии в том же разделе выберите нужную копию и нажмите “Восстановить”.
Как вставить на ucoz свою шапку для сайта

Важно:

  • При копировании учитывайте, что функция копирует все шаблоны активированных в момент ее использования модулей. При восстановлении резервной копии восстанавливаются все модули. Для восстановления сайта с определенными модулями вам потребуется самостоятельно редактировать резервную копию, удаляя ненужные модули;
  • Резервное копирование шаблонов не распространяется на шаблоны с персональным дизайном и CSS. Копирование последнего осуществляется при полном резервном копировании;
  • Максимально возможное количество активных копий, хранящихся на файловом менеджере сайта – не более 20.
14. Что такое конструктор шаблонов и как им пользоваться? Ответ: Конструктор шаблонов позволяет создавать уникальный дизайн сайта или изменять уже существующий. Конструктор может использоваться для разметки страницы на блоки, которые, в свою очередь, могут пополняться информацией, запрещаться к отображению в указанных разделах или редактироваться необходимым вам образом.
Для начала работы с конструктором шаблонов вам потребуется зайти в следующий раздел: Панель управления → Дизайн → Конструктор шаблонов. При работе с конструктором вы сможете использовать готовые системные коды, список которых приведен в нижней части страницы. Также вы сможете использовать теги каркаса, “разбивающие” страницу на блоки. Для получения списка тегов и кодов каркаса, а также другой полезной информации нажмите на “Помощь”.

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

15. Возможно ли использовать PDA-версию сайта? Ответ: Конечно. В uCoz уже предусмотрена возможность включения мобильной версии сайта, все, что вам нужно сделать – это активировать соответствующую опцию. Для этого зайдите в раздел общих настроек сайтом: Панель управления → Настройки → Общие настройки: Активизировать шаблоны для PDA версии сайта.

Редактирование стандартных PDA-шаблонов осуществляется в разделе управления дизайном: Панель управления → Дизайн → Управление дизайном (шаблоны): Шаблоны для PDA версии сайта.

Посмотреть дизайн PDA-версии вашего сайта вы можете добавив /pda в адрес сайта: sitename.ru/pda. При открытии сайта с мобильных устройств PDA-версия будет открываться автоматически.

16. Как использовать быструю замену участков кода? Ответ: uCoz обладает функционалом, позволяющим осуществлять быструю замену участков HTML-кода на необходимый вам. Для использования этой функции необходимо зайти в следующий раздел: Панель управления → Дизайн → Быстрая замена участков шаблонов. Для осуществления замены введите код или словосочетание, подлежащее замене, в поле “Что заменить”. Код или словосочетание, которое вы желаете разместить вместо заменяемого, введите в поле “На что заменить”. Настроив опции замены, нажмите “Произвести замену”.
Будьте аккуратны при использовании функции замены, в противном случае вы можете изменить код и в тех местах шаблонов, где вы не собирались что-либо менять.
17. Как задать персональный шаблон для страницы модуля “Редактор страниц”? Ответ: Система uCoz позволяет задавать дизайн для страниц вашего сайта, создаваемых с помощью редактора страниц (ссылки таких страниц заканчиваются: /index/0-id). 1. Для изменения страницы зайдите на нее через uID под аккаунтом администратора сайта. Нажмите на кнопку редактирования HTML-кода страницы. 2. Редактируя страницу, в опциях отметьте пункт использования персонального шаблона для страницы.

3. Теперь вам понадобится зайти в раздел управления дизайном: Панель управления → Дизайн → Управление дизайном (шаблоны).
В списке шаблонов найдите вашу страницу и перейдите к ее редактированию. 4. Отредактируйте шаблон страницы.

Максимальное количество персональных страниц – не более 20. При создании персональных страниц учитывайте, что они отличаются от шаблона “страницы сайты”. В них отсутствует шапка сайта, контейнеры и прочие элементы, имеющиеся в шаблоне последних.

Источник: https://faq.ucoz.ru/faq/22-1

Как установить шаблон на uCoz. Пошаговая инструкция

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

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

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

pro.

Загрузка файла с шаблоном

Итак, загружаем архив с шаблоном:

Как вставить на ucoz свою шапку для сайта

Внутри архива находятся несколько вложенных папок: 

  • папка с изображениями (images, img); 
  • папка со скриптами (js); 
  • папка со стилями (css);
  • папки с кодами Глобальных блоков, Информеров и т.д.

Также в архиве, как правило, присутствуют: 

  • инструкция.txt (ReadMe.txt) — настоятельно рекомендую обязательно прочитать;
  • конструктор шаблонов.txt (tmpl.txt) — общий код каркаса;
  • таблица стилей.txt (css.txt, style.txt) — файл с набором стилей;
  • вид материалов.txt — содержит код вида материалов;
  • и др. текстовые файлы с кодами, которые нужны для полной установки шаблона.

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

Делаем резервную копию текущего шаблона

  • Прежде чем приступить к установке нового шаблона рекомендую сделать бэкап текущего шаблона (на всякий случай)
  • Для этого — заходим в «Панель управления» своего сайта — «Дизайн» — «Резервное копирование шаблонов»:

Как вставить на ucoz свою шапку для сайта

  1. Нажимаем в правом верхнем углу кнопку «Создать резервную копию», после чего вы увидите появившийся резервный архив с вашим текущим шаблоном вида «1372338464.zip» с датой создания в скобках:

Как вставить на ucoz свою шапку для сайта

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

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

Пошаговая инструкция по установке шаблона на uCoz:

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

Шаг-1

Загружаем папку с изображениями images к себе на сервер. Это можно сделать двумя способами.

Первый способ — через FTP-клиент, например, FileZilla. Скачиваем и устанавливаем программу: http://filezilla.ru/get/.

После этого, на главной странице Панели Управления жмем [FTP детали] и задаем новый пароль:

Как вставить на ucoz свою шапку для сайта

  • После этого открываем ftp-менеджер FileZilla, в самом верху вводим Хост, Имя пользователя и Пароль, нажимаем «Быстрое соединение»:

Как вставить на ucoz свою шапку для сайта

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

  1. Данным способом удобно пользоваться если нужно закачать много изображений, или других файлов.
  2. Второй способ — загрузка изображений через Файловый менеджер. Переходим на главную страницу ПУ и нажимаем на «Файловый менеджер»:

Как вставить на ucoz свою шапку для сайта

  • В право верхнем углу жмем Создать папку, вводим название images и нажимаем Enter:

Как вставить на ucoz свою шапку для сайта

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

Как вставить на ucoz свою шапку для сайта

Таким образом закачиваем на сервер все картинки из папки images.

Шаг-2

Устанавливаем (если нужно) значение тега . Заходим в «ПУ (Панель Управления)» — «Настройки» — «Общие настройки» и в соответствующее поле вставляем код: 

Как вставить на ucoz свою шапку для сайта

Не забываем внизу нажать «Сохранить».

Шаг-3

Устанавливаем Таблицу стилей. Для этого, находим в архиве файл «Таблица стилей.txt», открываем и копируем из него весь код (Ctrl+A, Ctrl+C) и вставляем его вместо старого кода в «ПУ» — «Дизайн» — «Управление дизайном (CSS)» — «Таблица стилей (CSS)»:

Как вставить на ucoz свою шапку для сайта

Шаг-4

Устанавливаем код из файла «Конструктор шаблонов». Открываем файл из архива «Конструктор шаблонов.txt», копируем все содержимое и вставляем его в «ПУ» — «Дизайн» — «Конструктор шаблонов», нажимаем кнопку «Создать шаблоны»:

Шаг-5

Теперь, аналогичным образом переносим содержимое файла «Вид материалов.txt» в вид материалов модулей: «Новости сайта», «Блог», «Каталог файлов», «Каталог статей». Идем в «ПУ» — «Дизайн» — «Управление дизайном (шаблоны)»:

Источник: https://uguide.ru/kak-ustanovit-shablon-na-ucoz

Как вставить картинку на сайт ucoz — Три способа | Как создать сайт на конструкторе, на движке или своими руками

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

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

Рекомендую почитать:

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

А мы приступим

Я уже говорил что есть 3 способа как добавить картинку на сайт, первый способ мы попробуем реализовать через обычную кнопку, которая находится в визуальном редакторе. Когда добавляешь новость на сайт, к новости можно прикрепить картинку, это будет второй способ. А третий, мы попробуем реализовать через обычный тег html .

Тег — Позволяет вставлять на наш сайт картинки, и подгружает их через специальный атрибут — src.

Первый вариант

Так вот, авторизуйтесь на сайте как администратор, и нажмите кнопку добавить новость на сайт (читайте статью по ссылке выше, если не знаете как добавлять новости на сайт).

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

После этого нажмите на иконку изображение.

Как вставить на ucoz свою шапку для сайта

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

Второй варианта, пойти в файловый менеджер и загрузить картинку с компьютера, стрелочка под номером №2. Под номером №3, стрелочка указывает на поле, которое нужно заполнить, дать название нашей картинке.

Это очень полезно для поисковых машин.

Как вставить на ucoz свою шапку для сайта

Поля под номером №4, помогают задать высоту и ширину для картинке. Стрелочка под номером №5, помогает задавать вокруг картинки границу, в данном случае граница чёрного цвета.

Стрелочки под номером №6, указывают на отступы вокруг картинки, какое расстояние пропишите в полях, на такое к картине не приблизятся другие элементы, к примеру текст.

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

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

Как вставить на ucoz свою шапку для сайта

Второй вариант

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

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

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

Как вставить на ucoz свою шапку для сайта

Щёлкну по кнопке, откроется HTML редактор. В нём напишите код такой конструкции. Две скобки, одна открывается другая закрывается . Промеж этих скобок напишите три буквы img, эти буквы скажут браузеру что этот тег для картинки.

После трёх букв поставьте пробел и напишите ещё три буквы src, и сразу после этих букв, ставим равно = а за равно, две двойные кавычки, промеж этих кавычек нужно указать ссылку на картинку.

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

Как вставить на ucoz свою шапку для сайта

Давайте немного подробнее разберём тег. Данный img тег одинарный, есть парные теги, есть одинарные. Вот так пишутся одинарные , вот так пишутся парные — парные ещё называют контейнеры.

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

За первой скобкой сразу пишется название тега, в нашем случае это img, а за тегом идёт пробел и пишется атрибут, после атрибута можно поставить пробел и написать ещё атрибут. Атрибутов можно писать сколько угодно.

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

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

Как вставить на ucoz свою шапку для сайта

Третий вариант

Ну и последний вариант, это добавить картинку, через кнопки под редактором. Сейчас не важно какой редактор вы выберете, визуальный или HTML. Данный способ добавления картинки, будет работать и так и так.

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

Если нажать на плюс, можно добавить несколько картинок в новость.

Как вставить на ucoz свою шапку для сайта

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

Как вставить на ucoz свою шапку для сайта

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

Как вставить на ucoz свою шапку для сайта

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

  1. Благодарность бывает разная, поддержка проекта в денежном выражении.
  2. Поделится ссылкой, на пример на своём сайте или в соц сетях.
  3. Оставить комментарий на сайте.

Есть много разных вариантов как отблагодарить Автора.

Источник: https://nischenko.ru/uroki-ucoz/kak-vstavit-kartinku-na-sajt-ucoz-tri-sposoba.html

В этом уроке, Вы узнаете, как сменить шапку сайта ucoz. Хочу напомнить, что уроки по изменению дизайна, представленные на сайте http://webcaum.ru, НЕ являются универсальным решением, т.к. к каждому шаблону сайта нужен индивидуальный подход. Уроки даны лишь для того, чтобы было понимание, как меняются элементы сайта на Юкозе. Прежде чем продолжить, скачайте файлы для дальнейшей работы и разархивируйте их.

В первую очередь нам нужно закачать файл fon.gif. Чтобы закачать его зайдите в раздел: Инструменты -> Файловый менеджер.

Как вставить на ucoz свою шапку для сайта

Перед Вами появится окно загрузки файлов. Нажмите на кнопку «Обзор», зайдите в папку, где находятся скачанные файлы, и выберите картинку fon.gif. Затем нажмите на кнопку «Загрузить файл».

Как вставить на ucoz свою шапку для сайта

После загрузки файла fon.gif нажмите на кнопку в виде глаза , чтобы посмотреть в какой директории находится картинка. Вы увидите, что файл находится в коневой папке сайта, т.е. по адресу http://ИМЯ_ВАШЕГО_САЙТА.ucoz.ru/fon.gif. Данный файл будет фоном для шапки нашего сайта. Вы спросите, как такая маленькая картинка может стать фоном для всей области шапки? Дело в том, что данный файл будет размножен в горизонтальной и вертикальной плоскости. И сейчас Вы узнаете, как это сделать.

Зайдите в раздел: Дизайн -> Управление дизайном (CSS).

Как вставить на ucoz свою шапку для сайта

Вы попадёте в раздел, где мы можем менять данные таблицы стилей (CSS). Если с помощью HTML создаётся структура сайта, то с помощью CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) эта структура украшается. Если Вы не знаете, что такое HTML и CSS, то изучите сначала ниже представленные видеокурсы:

  • Итак, приступим к изменению дизайна шапки сайта. На 5-ой строчке в таблице стилей Вы увидите следующий код:
  • #logoBlock {padding:50px 20px 10px 20px;border-top:5px solid #000000;}
  • Именно этот код мы будем корректировать, чтобы привести шапку сайта в тот вид, который нам нужен. Замените полностью данный код на следующие данные :
  • #logoBlock {height:96px;border-top:2px solid #000000;border-bottom:2px solid #000000;background: url('/fon.gif');}

, где
height:96px — это высота шапки в 96px.
border-top:2px solid #000000; — верхнее подчёркивание сплошной (solid) чёрной (#000000) линией толщиной в 2px.

border-bottom:2px solid #000000; — нижнее подчёркивание сплошной (solid) чёрной (#000000) линией толщиной в 2px.
background: url('/fon.gif'); — означает, что фоном шапки будет картинка fon.

gif, размноженная в горизонтальной и вертикальной плоскости.

Также этот код Вы можете привести в следующий вид (как Вам будет удобней):

#logoBlock {

height:96px;
border-top:2px solid #000000;
border-bottom:2px solid #000000;

background: url('/fon.gif');

}

Нажмите кнопку «Сохранить». Обновите главную страницу сайта, и Вы увидите, что шапка теперь выглядит так:

Как вставить на ucoz свою шапку для сайта

Бывает так, что не сразу браузер показывает изменения, произошедшие на сайте.

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

Чтобы стереть кэш в таких браузерах, как Mozilla и Internet Explorer, нажмите «CTRL + F5». Если данное сочетание клавиш не работает (например, в Опере), то просто несколько раз нажмите клавишу F5.

Итак, фон шапки сайта мы поменяли. Теперь нужно красиво расположить заголовок «Белый каталог сайтов» в шапке.

Зайдите в раздел: Дизайн -> Управление дизайном (шаблоны).

Как вставить на ucoz свою шапку для сайта

После чего перейдите в раздел «Верхняя часть сайта».

Как вставить на ucoz свою шапку для сайта

Обратите внимание на код, который находится на первой строчке:

Белый каталог сайтов

Добавьте тег с левой стороны от тега

, а с правой стороны от тега

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

Белый каталог сайтов

После нажмите кнопку «Сохранить». Дополнительные теги мы добавили для того чтобы задать нужный нам фон для области, в которой находится заголовок «Белый каталог сайтов», заключенный в теги

, и сделать отступы для блока

Белый каталог сайтов

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

Прежде всего, нам нужно закачать файл h1-fon.jpg. Зайдите в «Файловый менеджер» и закачайте его.

Затем перейдите в раздел: Дизайн -> Управление дизайном (CSS).

Как вставить на ucoz свою шапку для сайта

После блока стилей #logoBlock {height:96px;border-top:2px solid #000000;border-bottom:2px solid #000000;background: url('/fon.gif');} на следующей строчке напишите следующий код:

#logotip_h1 {
background: url('/h1-fon.jpg') no-repeat;
position: relative;
top:25px;
left:39px;
width:472px;
height:60px;
padding-top:13px;
text-align:center;

}

, где
background: url('/h1-fon.jpg') no-repeat; — фон блока , в котором находится заголовок

Белый каталог сайтов

position: relative; — означает, что положение элемента устанавливается относительно всей области шапки . Добавление свойств left, top, right и bottom изменяет позицию элемента .
top:25px; — устанавливает величину отступа в 25px для элемента от верхнего края блока .

left:39px; — устанавливает величину отступа в 39px для элемента от левого края блока .
width:472px; — ширина элемента в 472px.
height:60px; — высота элемента в 60px.
padding-top:13px; — делает внутренний верхний отступ. Т.е.

у элементов, находящихся внутри кода (в нашем случае — это заголовок

Белый каталог сайтов

), будет отступ сверху в 13px.
text-align:center; — устанавливает по центру элементы, которые находятся внутри кода .

Нажмите кнопку «Сохранить» и обновите главную страницу сайта. Теперь шапка сайта выглядит так:

Как вставить на ucoz свою шапку для сайта

Теперь осталось поменять цвет заголовка «Белый каталог сайтов» с чёрного на белый.

Для этого в таблице стилей CSS найдите строчку #logoBlock h1 {color:#000000;font-size:24pt;font-weight:normal;margin:0;padding:0;} и замените код #000000, который означает чёрный цвет, на #FFFFFF (белый цвет). Т.е. данная строчка должна теперь выглядеть так (красным цветом отмечено то, что было изменено):

#logoBlock h1 {color:#FFFFFF;font-size:24pt;font-weight:normal;margin:0;padding:0;}

Обновите сайт. Теперь шапка сайта выглядит так:

Как вставить на ucoz свою шапку для сайта

В этом уроке Вы узнали, как изменить шапку сайта ucoz. В следующем уроке Вы узнаете, как поменять нижнюю часть сайта.

Урок№5. Как поменять нижнюю часть сайта на ucoz.ru
Урок№6. Как изменить меню сайта на ucoz.ru
Урок№7. Как работать с визуальным редактором сайта на ucoz.ru

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

Источник: http://webcaum.ru/urok4-kak-pomenyat-shapku-sajta-na-ucozru.html

Как сделать шапку сайта

В этой статье рассмотрим, как сделать шапку сайта, и расположить на ней заголовок, и описание сайта

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

А тем, кто не владеет этим редактором, я предлагаю самый простой способ изготовления картинки для шапки сайта, в имеющимся на всех Windows по умолчанию Paint.

Ширину картинки сделаем 900px, по ширине сайта, высоту — 200px. У Вас конечно могут быть свои размеры, лишь бы ширина картинки совпадала с шириной сайта (оболочка wrapper), высота на Ваше усмотрение.

  • Как только картинка будет готова, и размещена в папке images каталога сайта, возьмём каркас сайта, созданный на предыдущей странице, и приступим к установке шапки на сайт.
  • СSS:
  • В селекторе #header убираем заданную ему высоту, и прописываем ширину и высоту сделанной картинки.
  • #header{
      width: 900px;     — ширина
      height: 200px;    — высота
      background-color: #25B33f;  — фон
      margin-bottom: 10px;    — отступ снизу
    }
  • Затем вставляем саму картинку.
  • #header{
      width: 900px;
      height: 200px;
      background-color: #25B33f;
      margin-bottom: 10px;
      background-image: url(images/i8.png)  — картинка
    }
  • Свойство background-color указывается на тот случай, если картинка вдруг, в каком либо браузере посетителя, не отобразится.
  • Если картинка разместилась с каким-либо смещением, и нужно её подправить, то сюда же добавляется свойство background-position
  • HTML
  • Теперь дошла очередь до заголовка и описания сайта. Для этого прописываем в теге body блок div с идентификатором id=»header», и в нём два заголовка h1 и  h3, в которые и вставляем название сайта и его описание
  •   Шапка сайта
        Как сделать шапку для сайта с заголовком и описанием

  • Посмотрим, что у нас получается.
  • Как вставить на ucoz свою шапку для сайта
  • Теперь, придадим вид заголовку и описанию. Создаём для них два селектора, и прописываем следующие свойства:
  • h1{
      color: #ffee00;  — цвет заголовка
      font: 40px Georgia;  — шрифт
      margin-left: 300px;  — отступ слева
    }
  • h3{

  width: 200px;  — ширина
  color: #ffee00;  — цвет
  font-style: italic;  — курсив
  margin: 70px 0 0 30px;  — расположение
}

Для h3 зададим ширину в 200 пикселей, чтоб он не растянулся на всю картинку. Отступами можно манипулировать в зависимости от того, в каком месте шапки будет удобнее разместить текст.

  1. Посмотрим результат.
  2. Как вставить на ucoz свою шапку для сайта
  3. По моему, очень даже симпатично.
  4. Обобщим код этой страницы.
  5. Документ без названия

    #wrapper{
        width: 900px;
        outline: 1px solid #787274;
        padding: 10px;
        margin: 0 auto;
    }

  6. #header{

    width: 900px;
    height: 200px;
    background-color: #25B33f;
    margin-bottom: 10px;
    background-image: url(images/i8.png)
}

#sidebar{

    background-color: #2FF553;
    margin-bottom: 10px;
    width: 180px;
    padding: 10px;
    float: right;
}

#content{

    background-color: #9EF5AF;
    margin-bottom: 10px;
    width: 670px;
    padding: 10px;
}

#footer{

    height:80px;
    background-color: #41874E;
    margin-bottom: 10px;
}

.clear{

clear: both;
}

h1{

color: #ffee00;
font: 40px Georgia;
margin-left: 300px;
}

h3{

width: 200px;
color: #ffee00;
font-style: italic;
margin: 70px 0 0 30px;
}

  
    
      Шапка сайта
        Как сделать шапку для сайта с заголовком и описанием
    
    Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать
Вас на своём сайте.
Этот сайт первый, который я разработал самостоятельно,
а до этого умел только входить в интернет.
    А мне, учитывая возраст и «опыт», было не просто
понять как раз эти нюансы, они отнимали
больше всего времени.
И я решил написать свой материал, так что-бы другим было легче
сориентироваться в потоке новой информации.
Здесь «разжеваны» все мелочи сопровождающие создание сайта,
мимо которых обычно проскакивают другие авторы.
    
    
  

Есть ещё один вариант вставки картинки в шапку сайта. Можно вставить адрес картинки в блок перед заголовком

(к примеру, адрес моей картинки

В таком случае, в селекторе #header убираем свойство background-image: (../images/position.png);, и прописываем position: relative.

  • А в селекторах тегов h1 и h3, прописываем свойство position: absolute;.
  • При этом необходимо будет изменить отступы для заголовков. Подробнее о том, почему так делается, можно прочитать в статье Относительное позиционирование
  • #header{ width: 900px; height: 200px; background-color: #25B33f; margin-bottom: 10px; position:relative;
    }

h1{ position: absolute; color: #ffee00; font: 40px Georgia; left: 300px;
}

h3{ position: absolute; width: 200px; color: #ffee00; font-style: italic; top: 70px; left:30px;
}

  1. Всё остальное остаётся без изменения.
  2. Теперь немного информации для тех, у кого сайт расположен на CMS WordPress.
  3. На WordPress устанавливается готовая тема, с готовой шапкой, но допустим, Вам захотелось в эту готовую шапку, добавить какой нибудь свой логотип, или ещё какое изображение.

Делается это следующим образом. Открываете в консоли «Записи — Добавить новую», переводите редактор в режим HTML, и загружаете то изображение, которое потом будет добавлено в шапку сайта.

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

Затем переходим во «Внешний вид — Редактор», и открываем для редактирования файл header.php.

  • В этом файле, находим строку , и после неё вставляем скопированный код картинки.
  • После этого обновляем файл, и смотрим, как изображение разместилось в шапке сайта.
  • Если его нужно куда то подвинуть, то возвращаемся в редактор файла, и в код изображения, в тег img, добавляем атрибут style со свойством margin
  • style=»margin:0 0 0 0;»
  • И двигаем изображение туда, куда нам нужно.

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

P.S. Если кому-то захочется поменять картинку в шапке сайта на WordPress, и по манипулировать расположением заголовков, то об этом в статье Редактируем тему оформления

Желаю творческих успехов.

Неужели не осталось вопросов? Спросить

Перемена

Пьяный никак не может затолкнуть двушку в прорезь автомата. — Напился, — а еще таксист, — сказала прохожая. — С чего взяла? — Шапка таксистская. — Да, — задумчиво произнес пьяный, — а была ондатровая.

Как сделать картинку для шапки в Paint < < < В раздел > > > Как вставить картинку и текст в отдельный блок
 

Рекомендую: Готовые HTML шаблоны на русском

Источник: https://starper55plys.ru/css/shapka-sayta/

Занятие 17. Как поменять шапку сайта на юкозе (часть 3)

  Вот и пришло время для самого ответственного и волнующего этапа –    смены шапки сайта в стандартном шаблоне.

1. Зайдем в Панель управления сайтом и откроем Инструменты – Файловый менеджер. В окне Файлового менеджера нужно нажать кнопку Создать папку. Новую папку назовите header. Откройте ее.

2. В папку header загрузите файлы 1.gif, 4.gif, 5.gif, файлы 2.gif, 3.gif мы менять не будем, поэтому и загружать их не нужно.

3. Напротив каждого файла стоит синенький кружочек с буквой і. Нужно нажать на нее и скопировать ссылку.

4. Зайдите в Панель управления –> Управление дизайном. Кликните два раза по строчке Верхняя часть сайта, чтобы выделить ее и открыть окно для редактирования шаблона.
Откроется окно редактора шаблонов с кодом верхней части сайта. Именно в этой части кода содержится информация о внешнем виде хедера на вашем сайте.

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

Совет: заведите еще один (тренировочный) сайт на юкозе, выберите для него такой же шаблон и все эксперименты проводите сначала на нем, а лишь потом уже на основном сайте. Так вам удастся избежать потерь и разочарований из-за всевозможных сбоев и накладок.

В коде нужно найти места, где прописаны рисунки 1.gif, 2.gif, 3.gif, 4.gif, 5.gif (на картинке они выделены красными прямоугольниками. Чтобы увеличить изображение, щелкните по картинке два раза) и заменить их на адреса картинок, загруженных в папку header.

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

5. Перейдите на свой сайт и посмотрите произведенные изменения. Если вы все сделали правильно и аккуратно, то результат должен вас порадовать.

Иногда внешний вид хедера прописывают не в самом шаблоне, а в стилях CSS. Если у вас именно такой случай, то редактировать нужно файл стилей. Он находится на вкладке Управление дизайном, немного ниже строчки Верхняя часть сайта.

Удачи вам!

Источник: http://scolsait.blogspot.com/2011/04/17-3.html

Как сделать свою шапку сайта на uCoz

Как сделать свою шапку сайта на uCoz
Самым первым и самым естественным желанием создателя сайта, после установки какого-нибудь готового шаблона дизайна (например, в магазине шаблонов uCoz), является замена шапки сайта. И это понятно, так как изначальная шапка зачастую не отражает сути сайта, а надпись в шапке так и вообще убога. Однозначно, будем ставить свою. Здесь я расскажу о замене шапки в дизайне №819 и подобных ему — в них шапка состоит из одного элемента-картинки, и её замена очень проста даже для новичка. Есть дизайны, в которых шапка состоит из нескольких элементов-таблицы, их замена намного сложнее, порой даже проще просто поменять сам дизайн

Источник: http://ucoz-site.ru/kak-sdelat-svoyu-shapku-sajta-na-ucoz/

Как поменять шапку сайта ucoz

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

Итак, заходим в нашу панель управления (ПУ) через админ-бар. Выбираем Редактор страниц — Управление дизайном модуля. В управлениях дизайном находим глобальные блоки — Верхняя часть сайта. Откроется HTML вашей шапки.

В этой строке определяем общий размер центровой части шапки:

То, что выделено красным — это ширина и высота вашей шапки. У меня шапка резиновая, т.е. подстраивается под размеры монитора. Поэтому она состоит из центровой части и тонкой вертикальной полоски, которая повторяется по бокам столько раз, пока шапка не получится на весь экран. Если у вас тоже резиновая шапка, то вот код этой полоски:

Для того, чтобы просмотреть рисунок, необходимо перед /.s/t/161/1.gif вставить адрес вашего сайта, например, мой тестовый сайт http://moi-sait2.ucoz.ru. Получим адрес для просмотра нашей картинки http://moi-sait2.ucoz.ru/.s/t/161/1.gif Полученный код вставляем в адресную строку браузера и открываем картинку в новой вкладке. Если вы перейдете по ссылке, то вы увидите в названии картинки размер этого изображения. Например, у меня он составляет 4х269 пикселов. Это тоненькая вертикальная полоска, которая делает мою шапку резиновой. Аналогичным образом мы просматриваем все картинки в верхней части сайта глобальных блоков. Просмотрев их, вы поймете, какие картинки относятся к шапке вашего сайта и определите их размер. После этого вы можете приступать к изготовлению новой шапки. Вы можете нарисовать ее сами в Фотошопе либо заказать в инете. Благо, таких объявлений сейчас много. После того, как у вас будет готова шапка, она должна быть порезана на куски такого же размера, какие были у вас в исходном варианте. После этого мы должны загрузить нашу шапку на сайт. Для этого заходим в ПУ сайта в раздел «Файловый менеджер» и загружаем сюда ваши кусочки с жесткого диска. Только учтите, что называть файлы нужно латинскими буквами либо цифрами. После того, как вы их загрузите, они появятся в перечне файлов. Нажмите на название любого файла, тогда у вас откроется адрес этого кусочка.

После того, как вы будете знать адреса всех кусков шапки, зайдите опять в верхнюю часть сайта в глобальных блоках и поменяйте ссылки для шапки в HTML. БОЛЬШЕ НИЧЕГО МЕНЯТЬ НЕ НУЖНО! Только адреса картинок шапки! Например, если у вас была ссылка на картинку в виде ('/.s/t/161/1.gif'), то сделайте в виде ('http://moi-sait2.ucoz.ru/poloska.png'). Т.е. это адрес картинки, который у вас показывается в файловом менеджере. Но расширение у вас может быть неpng, а любое gif, jpg и др. Рекомендую перед началом внесения изменений в HTML-код сохранить шаблон на случай непредвиденной ситуации. Поменять цвета ссылок, находящихся на шапке, можно в таблице стилей CSS. Надеюсь, что информация полезна. Будут вопросы, спрашивайте.

Добавлено Если вы поставите свою шапку,то скорее всего у вас на шапке будет название сайта и вам надо будет убрать изначальное, которое заложено шаблоном. Нажмите в верхнем меню сайта Конструктор — включить конструктор, удалите название.Вместо него у вас останется три точки. Чтобы убрать их, зайдите в панель управления — управление дизайном — глобальные блоки — верхняя часть сайта. Ваши три точки вы найдете тут:
Удалите их. ——————————————————————————
Свадебный салон «Медовый месяц» предлагает эксклюзивные свадебные наряды, о которых вы могли только мечтать! Мы предлагаем только лучшие образцы свадебных коллекций от всемирно известных брендов! С нашими платьями вы будете самой прекрасной невестой!

В компании «Меридиан 60» вы можете заказать газель для квартирного или офисного переезда. Мы не только перевезем ваши вещи, но и поможем во время погрузки и разгрузки! С нами работать выгодно, надежно и удобно!

На сайте finsecret.ru вы можете дейл карнеги скачать бесплатно. Дейл Карнеги — знаменитый психолог, который написал множество полезных книг, помогающих человеку не только разбогатеть, добиться успеха в карьере и личной жизни, но и влиять на других людей.
——————————————————————————

С этой темой еще читают: .

Источник: http://ty-blogger.blogspot.com/2009/10/ucoz.html

Ссылка на основную публикацию