Как изменить оформление сайта ucoz

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

Для того, чтобы Вы не искали по всему интернету платные и бесплатные образцы интернет ресурсов, на моем ресурсе, я подготовила множество вариантов бесплатных и платных шаблонов. Вы можете легко скачать их, а на моем блоге мои уважаемые подписчики, Вы можете узнать, как именно можно сделать свой собственный интересный интернет — ресурс в этой статье https://metodbv.ru/personalnyj-sajt и по следующему адресу http://ucoz.ru/register.

Как изменить дизайн и расположение элементов в сайте

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

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

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

Как быстро и просто сделать это?

Первое, что необходимо сделать – это открыть панель управления. Для этого, нужно к адресу Вашего сайта (после слэш) дописать admin, а затем нажать клавишу «Enter», далее, откроется обновленная страница. Здесь необходимо написать пароль и кликнуть «Вход».

После того, как окажетесь на основной панели управления, сверху, в «админке», нужно найти клавишу настройки. Щелкните на ней. После этого выпадет небольшое окошко. Кликнем на «Общие настройки».

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

При нажатии на клавишу, откроется специальное окно, где будут находится стандартные шаблоны дизайна. Здесь Вы можете легко и просто подобрать такую цветовую гамму и расположение элементов, которое нравится лично Вам. Также легко и просто можно купить, сменить новый вариант оформления. Готовые образцы уже рассортированы по запросам. Теперь можно посмотреть их и поставить или поменять в случае необходимости. После того, как выберите понравившийся Вам – просто щелкните на нем. Далее – выскочит небольшое окно. Когда в окне появится вопрос – «Дизайн выбран – закрыть окно» — нажмите «ОК».

После этого, компьютер выведет окно «Общие настройки». Сделайте прокрутку страницы вниз и щелкните на кнопку «Сохранить».

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

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

С уважением, Татьяна Сухих и до встречи!

Когда создавал сайт, выбрал себе хостинг на Ucoz, так как он обладает рядом несомненных для меня достоинств:

1. Хостинг бесплатный, на первых проектов это отличный выбор.

2. Полный доступ к Html и Css коду, что дает большие возможности по изменению дизайна и шаблона страницы, если разобраться. Можно сменить дизайн на сайте Ucoz Юкоз без всяких проблем.

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

4. Возможность прикрутить к хостингу домен второго уровня.

5. Отсутствие рекламы, возможность установить свою при желании.

6. Удобная русифицированная админка для управления сайтом.

7. Возможность создания нескольких сайтов на одном аккаунте.

Сегодня я хотел бы рассказать, как изменить дизайн своего сайта на Ucoz Юкоз.

Как сменить дизайн сайта на Ucoz Юкоз

Ucoz предлагает 246 оригинальных дизайнов на выбор, но обычно выбирают из 10-20 особенно удачных, соответственно уже приглядевшихся и надоевших.  А давно известно, что для того, чтобы осуществить успешное продвижение сайтов в Екатеринбурге или ином городе, следует создать оригинальный и привлекательный дизайн сайта, к которым, разумеется, нельзя отнести шаблонный дизайн. Ну так меняем дизайн Ucoz Юкоз на свой. Если сперва сложно сделать дизайн с нуля, предлагаю изменить уже существующий.

Заходите в редактор страниц, выбираете пункт «общие настройки». Нажимаете напротив строки «Дизайн сайта:» — «выбрать дизайн», открывается окно выбора дизайна. Выбираете тот дизайн Ucoz Юкоз, который вам наиболее приглянулся, устанавливаете на сайт и начинаете редактировать.

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

1. Картинки прописаны в CSS. В верхней панели выбираете «Дизайн» — «Управление дизайном (CSS)». В окне ниже откроется собственно сам файл стилей. Находим в нем строчку вида: #header {background:url(‘/ee.jpg’) no-repeat;height:182px; ……} — это адрес вашей шапки сайта. (в разных шаблонах по разному, вам придется найти, какая картинка к чему относится)

2. Картинки прописаны в Html-шаблоне. Там же в верхней панели выбираете «Дизайн» — «Управление дизайном (шаблоны)». В окне ниже выбираете «верхняя часть сайта», ищете строчку вида: <td height=»193″ width=»698″ style=»background:url(‘/.s/t/341/7.jpg’) left no-repeat; ………> Опять же придется определить, какую именно картинку вы хотите поменять.

Чтобы узнать, какая именно картинка вам нужна, перейдите по адресу вида: «адрес вашего сайта/адрес картинки из шаблона» — откроется картинка, найдете нужную вам.

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

Аналогично поступаем со всеми картинками дизайна вашего сайта или создаем сразу новый дизайн для всей страницы и прикручиваем его к вашему сайту.

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

Мой блог находят по следующим фразам

• имя подписчикам в feedburn
• как создать контент бесплатно
• как сделать язык в союзе
• запись Читать дальше.. wordpress
• дешево получить тиц
• создание сайта за 5минут

На этой странице я покажу пример изменения шапки в стандартном шаблоне на 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 и наибольшее количество положительных отзывов. Лично мне не понравилось то, что автор вносит очень мелкие изменения в шапке, по мне изменения в примере – это уже интрига, это интересно, но такое изменение — разочарование. Тем не менее, урок очень понятный.

В этом уроке, Вы узнаете, как сменить шапку сайта 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 .В итоге моих рассуждений в этой статье у меня вышел вот такой дизайн (все картинки кликабельны) :-

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

Как узнать размер шапки Способ №1

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

Прежде всего вам нужно зайти на свой сайт,затем наводим курсор мыши приблизительно на центральную часть вашей шапки,после чего нажимаем на правую кнопку мыши и выбираем в выпавшем окошке:-

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

В ПЕРВОМ ОКНЕ находится блочное содержимое практически всего вашего сайта.

Т.е все теги и скрипты из которых и состоит ваш сайт. Но это только блочный состав вашего сайта,все содержимое для выравнивания и контроля за размером,а также за тональностью изменения цветовой гаммы каждого блока (т.е все цвета которые находятся у вас на сайте, кроме цвета картинок ) находятся во ВТОРОМ ОКНЕ .

При прокрутке колесиком мыши всего содержимого в ПЕРВОМ ОКНЕ (слева) ,вы наверняка заметите,как при наведении курсора мыши на определенный блок находившийся в открывающем и закрывающем теге

Т.е предположим при наведении на тег header ,который находится в блочном элементе в открывающем и закрывающем теге

Вот то,что у вас на сайте выделяется синим цветом- это и есть определенная область вашего сайта,на которую вы наводите курсор мыши при помощи ПЕРВОГО ОКНА.

Выделения синим цветом обозначаются квадратами у которых с левой нижней стороны идет надпись с размерами наведенными вами курсором мыши блоками в ПЕРВОМ ОКНЕ.

Таким образом мы можем узнать при помощи ПЕРВОГО ОКНА размер любой части вашего сайта.Также при помощи метода тыка,блуждая по ПЕРВОМУ ОКНУ вы можете найти блок который содержит в себе все параметры вашей шапки.

Так как,она выделится синим цветом с ее размерами,при наведении курсором мыши на ее блок находящийся в ПРАВОМ ОКНЕ .

А если кардинально сказать:- Вам нужно найти в содержимом ПРАВОГО ОКНА ,блок который содержит в себе тег header- это и будет содержимое вашей шапки.

При нахождении блока с тегом header выделяющего полностью вашу шапку синим цветом при наводки на него курсором мыши в ПРАВОМ ОКНЕ ,вам нужно будет нажать левой кнопкой мыши на найденный вами блок в ПЕРВОМ ОКНЕ.

Чтобы зафиксировать ее и увидеть остальные параметры вашей шапки,которые после зафиксирования,появятся во ВТОРОМ ОКНЕ .

Там вы можете посмотреть не только размеры своей шапки но и все расстояния которые заданы для фиксирования блока вашей шапки и т.д,а самое главное:-

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

Во ВТОРОМ ОКНЕ ,где находятся ВСЕ ДАННЫЕ ВАШЕЙ ШАПКИ вы найдете приблизительно такой код:

[html]#header <
background: url(«../img/header.png») no-repeat;
width: 697px;
height: 245px;
padding: 49px 0 0 265px;
>[/html]

Давайте теперь немного разберемся в данном коде:

1. #header — непосредственно является названием блока вашей шапки;
2. background :- содержит в себе картинку вашей шапки;
3. width :- показывает размер ширины вашей шапки(картинки)в пикселях;
4. height : — показывает размер длины вашей шапки(картинки) в пикселях;
5. padding : — показывает величину отступов вашей шапки(картинки) по краям,чтобы отцентрировать вашу шапку по середине верхней части вашего сайта;

Таким образом мы с вами уже знаем длину и ширину нужной нам картинки при помощи тегов height и width . В моем случае ширина:- 697 px, длина:- 245 px

Как узнать размер шапки Способ №2

Этот способ более простой и в основном для тех у кого есть в наличии сам шаблон в отдельной папке.Итак давайте приступим:-

Для начала открываем саму папку с вашим шаблоном и находим там папку со значением либо img , либо images , в моем случае в шаблоне находятся сразу две папки.

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

• Размеры : 962 x 294

• Тип Файл : PNG (у вас возможно JPG . )

• Размер : 691 КБ

Теперь давайте немного разберемся с выше перечисленным:-

Размеры:- непосредственно показаны в пикселях ( px ;),где первое число 962 — ширина вашей картинки (шапки) в пикселях ( px ),а второе число 294 — длина вашей картинки шапки в пикселях ( px )

Тип Файл:- показывает какое расширение стоит у вашей картинки.

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

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

Т.е картинка вашей шапки даже не отобразится у вас на сайте. Потому что в коде вашего сайта(шаблона) сама картинка вашей шапки,прописана именно как с расширением в формате PNG, а вы загружаете как JPG !

В этом случае вам придется менять расширение вашей картинки(шапки) в самом коде вашего шаблона,а это как говорится- Уже другая история!Поэтому Подписывайтесь на обновления блога,чтобы быть всегда в курсе всех событий происходящих на блоге ProfKatalog.ru

Размер: — показывает сколько весит ваша картинка в килобайтах.

Если у вас по каким то непонятным причинам,не высвечивается желтое окошко с данными вашей картинки при наведении на нее курсором мыши, тогда нажмите на нее правой кнопкой мыши, после чего выберите и нажмите в выпавшем окошке ==>> Открыть с помощью ==>>

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

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

Где первое число:- Размер ширины вашей картинки в пикселях (px),второе число размер длины вашей картинки в пикселях (px).

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

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

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

В итоге набранного мной текста в поисковике google у меня вышел такой текст:- КУЛИНАРИЯ ШАПКА ДЛЯ САЙТА вы конечно же вместо ключевого слова моего сайта- КУЛИНАРИЯ замените на ключевое слово подходящее тематики вашего сайта.

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

Самое главное:- При выборе картинки смотрите ее размеры,чтобы приблизительно совпадались с размерами шапки вашего сайта.

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

После того как вы ее поменяете- изменив размер выбранной картинки и залив ее на ваш хостинг.

Меняем картинку вашей шапки.

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

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

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

Если вы не хотите изучать фотошоп или просто нет желания,времени и сил можете ОБРАТИТСЯ КО МНЕ и я полностью сделаю вам нужную шапку.

Меняем размер картинки вашей будущей шапки.

Итак,мы с вами знаем точный размер нужной нам картинки,а размер картинки которую вы нашли- либо больше,либо немного меньше чем размеры нашей шапки.

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

Для этого мы будем с вами использовать программу фотошоп,но если у вас на данный момент нет данной программы тогда используйте программу ОНЛАЙН ФОТОШОП , которую вы можете найти при помощи поисковика google ,на первом месте в поисковой выдаче ее устанавливать не нужно,работа с фотошоп происходит онлайн.

Заходим на сайт http://editor.0lik.ru и сразу видим такую картину:-

Из вышеперечисленного на скрине выбираем кнопку-

Загрузить изображение с компьютера ==>>Выбираем папку==>>Выбранную нами ранее картинку для изменения вашей шапки ==>>Увеличиваем открывшиеся окно с вашей картинкой

после чего нажимаем две кнопки одновременно CTRL+A или воспользуйтесь инструментом Выделение и выделите курсором мыши всю область вашей картинки ==>>

Затем в верхнем меню фотошопа выбирите кнопку — Редактировать ==>> В выпавшем подменю нажмите Копировать —

Далее переходим ==>> Файл ==>> Новый рисунок ,после чего у вас высветится вот такое окошко-

Где вам нужно будет прописать нужные размеры вашей шапки (т.е те размеры которые мы с вами узнали при помощи 1-го и 2-го способов) и поставить галочку Прозрачность для того чтобы ваша в дальнейшем вставленная туда картинка не так много весила как с фоном с заливкой белого цвета по умолчянию==>>

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

таким образом мы вставляем ранее скопированную картинку ==>>Далее нажимаем одновременно две кнопки Сtrl + T ==>>

После чего у вас появится полупрозрачный квадрат с синими квадратиками для регулировки размера вашего изображения под прозрачный фон (размеры прозрачного фона мы с вами делали под размеры нашей шапки) ==>>

Центрируем изображение по середине прозрачного фона зажимая и передвигая его левой кнопкой мыши==>>

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

После того как вы подгоните каждую сторону под прозрачный фон ==>>

Нажимаем Файл ==>> Сохранить ==>>

После чего у вас будет вот такое окошко:-

Здесь так сказать- Самый важный и ответственный момент. Все параметры которые мы сюда с вами впишем должны четко совпадать с параметрами вашей старой картинки(шапки).

Давайте разберемся по порядку:-

Имя вашей картинки — название нашей будущей шапки.Название прописываем точно такое же как и название нашей старой картинки (шапки),которое мы можем взять в самом шаблоне нашего сайта,либо в админке ucoz.

Для первого варианта нам потребуется найти в разархивированной папке вашего шаблона старую картинку вашей шапки и скопировать ее название.

Во втором варианте вам нужно зайти в админку вашего сайта ucoz ==>> Файловый менеджер ==>>

Папку с картинками- это либо images либо img ==>> По очереди открывать каждую картинку,если вы там не найдете приблизительное название вашей картинки(шапки)- этим приблизительным названием непосредственно является header .

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

Формат картинки — здесь нам нужно выбрать точно такой же формат,который стоит у вашей старой картинке (шапке).

Форматов (расширений) у картинок любой шапки бывает всего два вида — это PNG и JPEG

Качество картинки — устанавливаем самое высокое 100% — это если у вас нужная картинка имеет расширение в формате JPEG ,если PNG — качество картинки устанавливается автоматически!

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

Я вас поздравляю,Вы сделали и подготовили вашу картинку к установке!Теперь заходим в админку вашего сайта ==>> Файловый менеджер ==>>

Находим нашу старую картинку(шапки),в моем случае,это header и удаляем ее при помощи красного крестика,который находится с правой стороны,напротив вашей картинки ==>>

После чего там же в той же папке где удалили загружаем новую уже готовую картинку ==>> Заходим на свой сайт и нажимаем F5 (обновить) и что мы видем в итоге:- Вуаля. У вас новая шапка с нормальным визуальным отображением!

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

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

Вы должны знать и понимать,как нам всем важна ВЗАИМОПОМОЩЬ ,которая требуется нам как в жизни так и в интернете!