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

Урок№4. Как поменять шапку сайта на ucoz.ru

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

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

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

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

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

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

Итак, приступим к изменению дизайна шапки сайта. На 5-ой строчке в таблице стилей Вы увидите следующий код:

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

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

#logoBlock <
height:96px;
border-top:2px solid #000000;
border-bottom:2px solid #000000;
background: url(‘/fon.gif’);
>

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

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

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

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

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

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

Интернет для “чайника”

Пособие для начинающих вебмастеров

Страницы

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

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

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

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

То, что выделено красным – это ширина и высота вашей шапки.

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

Читайте также:  Как завязывать большой галстук

Если у вас тоже резиновая шапка, то вот код этой полоски:

/.s/t/161/1.gif ‘) repeat-x;”>

Для того, чтобы просмотреть рисунок, необходимо перед /.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” вы можете заказать газель для квартирного или офисного переезда. Мы не только перевезем ваши вещи, но и поможем во время погрузки и разгрузки! С нами работать выгодно, надежно и удобно!

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

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

Инструкция

Итак, вот мой сайт со стандартным шаблоном, как изменить шапку?

1. Узнать ссылку изображения шапки.

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

Мне нужно найти изображение шапки, поэтому я ищу ссылку во вкладке «styles» справа. Выбранный мной элемент не содержал изображений в стилях, но вот его родитель (справа я выбрал элемент уровнем выше).

Я копирую ссылку.

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

2. Создать файл изображения новой шапки или изменить существующий.

Отредактировал шапку, взял для примера шапку Minecraft. Эта игра сегодня очень популярна, много сайтов создано на uCoz. В нашем каталоге есть шаблона Minecraft для uCoz (https://yraaa.ru/publ/7-1-0-1762) и красивые иконки групп (https://yraaa.ru/publ/14-1-0-1423).

3. Загрузить файл изображения шапки на сайт

Свое изображение сохраняю в файл «shapka.jpg» и загружаю в корневой каталог файлового менеджера (Панель управления – Файловый менеджер).

4. Открыть таблицу стилей сайта

Панель управления – Управление дизайном – Таблица стилей (CSS)

5. Заменить ссылку изображения шапки на свою

Копирую ссылку существующей на сайте шапки без домена, затем перехожу в редактирование таблицы стилей (CSS) и нахожу эту ссылку там (в Google Chrome делаю с помощью команды cmd+F или Ctrl+F).

Т.к. я загрузил файл «shapka.jpg» в корневой каталог, я просто заменяю ссылку на «/shapka.jpg». Нажимаю «Сохранить».

Видео урок по замене шапки на uCoz

Обещанный видео урок. В этом уроке наглядно показан принцип замены изображений в CSS-стилях на uCoz. Этот урок набрал наибольшее количество просмотров на YouTube и наибольшее количество положительных отзывов. Лично мне не понравилось то, что автор вносит очень мелкие изменения в шапке, по мне изменения в примере – это уже интрига, это интересно, но такое изменение – разочарование. Тем не менее, урок очень понятный.

Как сделать шапку сайта: простой способ

Привет, друзья! Сегодня я хочу рассказать о том, как сделать шапку сайта. Она являет собой визуальный элемент, придающий проекту индивидуальность, уникальность. Придает ресурс узнаваемость и свой стиль. Чтобы сделать ее, не требуются какие-то особые, специализированные знания, навыки и умения программирования. Существует два способа, позволяющих достичь цели. И каждый из них простой.

Как сделать шапку сайта: вводная информация

Начнем с общей информации о данном графическом и визуальном элементе. Он обладает несколькими неоспоримыми преимуществами:

  • формирует узнаваемость сайта;
  • позволяет размещать логотипы, официальную символику;
  • указывает на тематичность ресурса – пользователь с первого взгляда понимает, о чем идет речь;
  • делает проект более красивым, ярким;
  • добавляет солидности.

Кстати! У сайта еще нет собственного логотипа? Его также можно сделать самостоятельно всего за 5 минут. В этом вам поможет наш проект.

Что должен/может включать в себя верхний блок любой площадки:

  • логотип – яркий, заметный;
  • слоган;
  • номер телефона, адрес электронной почты или другие контакты;
  • меню.

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

Как сделать шапку сайта: два способа достижения цели

Я пока не буду углубляться в вопросы «как сделать шапку сайта html» или «как сделать шапку сайта css». Сначала о том, как подготовить для нее «рисунок».

1. Сделать шапку для сайта онлайн

Наиболее простой метод. Не требующий каких-либо навыков, профессиональных умений. Есть целый ряд площадок, на которых создаются шапки для сайтов. В них – наборы шаблонов. Некоторые сервисы позволяют вносить изменения в шаблоны. Другие – нет. Среди подобных проектов есть, как бесплатные, так и платные.

Сделать шапку для сайта онлайн очень просто. Только достичь оригинальности удается не всегда. Ведь работа предполагает использование шаблонов.

2. Adobe Photoshop

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

  • нужного размера;
  • соответствующего цвета и оттенка;
  • с нужным текстом и т.д..

Photoshop являет собой действительно идеальный инструмент для создания шапок и прочих визуальных элементов.

Промежуточный итог

Сделать графический элемент – половина дела. Необходимо еще правильно разместить его на страницах сайта. Сначала нужно поместить готовую картинку в папку IMAGES. Она находится в каталоге административной панели. После чего можно приступать к размещению изображения на страницах.

Как сделать шапку сайта CSS: помещаем изображение на сайт

Рассказываю, как сделать шапку сайта CSS. Переходим в #header и там вместо установленных параметров высоты прописываются габариты созданной картинки – высота и ширина изображения.

Вот пример кода:

width: 1420px; — ширина

height: 300px; — высота

background-color: #25B33f; — фон

margin-bottom: 30px; — отступ снизу

Обратите внимание! Здесь и далее слова «Ширина», «Высота», «Фон» и прочие к коду не имеют отношения. Они лишь указывают, что значит та или иная строка.

После этого остается вставить только саму шапку:

background-image: url(images/i8.png) — картинка

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

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

Мой сайт

Теперь я знаю, как сделать шапку сайта

Если нужно изменить внешний вид самого заголовка и текста описания, оформить их, потребуется использование вот такого кода:

color: #2980b9; — цвет заголовка

font: 50px Times New Roman; — шрифт

margin-left: 500px; — отступ слева

width: 400px; — ширина

color: #9b59b6; — цвет

font-style: italic; — курсив

margin: 90px 0 0 40px; — расположение

И еще один вариант

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

Обратите внимание! Вот как может выглядеть адрес картинки: .

При таком «развитии событий» нужно в #header удалить строку background-image: и указать position: relative. А разделах h1 и h3 указать position: absolute;. Однако нужно будет поменять отступы заголовков. Что поможет в позиционировании.

font: 50px Times New Roman;

Обратите внимание! Размеры в px приведены в качестве примера. Не нужно принимать их за истину! Размеры на своем сайте устанавливайте самостоятельно!

Шапка сайта для WordPress

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

Для этого необходимо пройти по следующему пути:

  • зайти в административную панель;
  • выбрать «Записи» = «Добавить новую»;
  • перейти в режим HTML редактора;
  • загрузить картинку, которая планируется в качестве шапки;
  • после окончания загрузки в редакторе будет виден код картинки;
  • его необходимо скопировать;
  • «Запись» удалите;
  • откройте раздел «Внешний вид» = «Редактор»;
  • выберите файл header.php для редактирования;
  • в нем нужно найти строку

Обратите внимание! Нужно немного изменить положение шапки на странице? Для этого возвратитесь в редактор, перейдите в код и в тег img, внесите атрибут style со свойством margin. Вот как это будет выглядеть: style=»margin:0 0 0 0;»

Как сделать шапку сайта: личный совет

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

Если вас интересуют прочие секреты, как работать с платформой WordPress, читайте мой блог. В нем много полезного по этой теме.

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

Инструкция по смене шапки в системе uCoz

Инструкция

1 шаг

Для того, чтобы ваш сайт отображался нормально вам надо скачать браузер Mazila firefox (который можно найти на neveroff.do.am если не заходит, то домен поменялся на .net)

2 шаг

Сначало создаём сайт(www.ucoz.ru) и выбираем какой вам нужен шаблон.
После чего заходим на ваш сайт через Mazila

3 шаг

Видим ваш сайт
Нажмите на шапку сайта правой кнопкой мыши и выберите: Открыть фоновое изображение
После чего вылезла отдельная ссылка на эту картинку, скопируйте эту ссылку (или запомните)
Сохраните ваше изображение куда вам удобно
Затем откройте его с помощью PhotoShop если такого нет, то лучше его скачать,потому что нормальной шапки без него у вас не получится
После открытия поверх картинки рисуем то, что вам надо, не изменяя размеров картинки
Нарисовав, сохраните её куда вам удобно

4 шаг

После создания Картинки заходите на ваш сайт в панель управления
Там выбирайте Управление дизайном=>Общие шаблоны=>Таблица стилей CSS
У вас появилось окно с многочисленными тегами
нажмите Ctrl+F внизу у вас появится строка,это поиск
Теперь залейте ваш рисунок в Файловый Менеджер каторый можно найти в той же панели управление,когда зальёте нажмите на этот фаил,у вас выскочит ссылка,скопируйте её.
Затем опять заходим в CSS и вспоминаем ссылку которая была когда вы открили ваша шапку,вам ну ;ен только конец ссылки,где написан номер картинки и расширение(пример 3.jpg),тперь осталось вбить в поиске название и расширение картинки,это всё выделитса у вас зелёным цветом и ссылка будет выглядит примерно вот так :url(‘код шапки’) вы стираете код шапки(оставляйте скобки с апострофами) и вместо него вставляйте ссылку на картинку,которую вы копировали при заливании фаила.
Нажмите Сохранить и всё..ваша шапка сминена…осталось только зайти на сайт и посмотреть как получилось
В конце ссsлки у вас должно было быть написано номер картинки и расширение(пример 3gif)

5 шаг

Если у вас что то не получилось или вы не поняли что я тут написал прошу сюда ICQ381919057 или Skype Sckroup

Оцените статью
Добавить комментарий