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

Приветствую дорогой мой подписчик,читатель или просто случайно зашедший прохожий!В этом посте я решил затронуть тему которая интересует многих начинающих вебмастеров,а также просто желающих видоизменить шапку (верхушку) своего недавно установленного шаблона…

который мы с вами установили в прошлой статье Как поменять шаблон (дизайн) на сайте ucoz.В итоге моих рассуждений в этой статье у меня вышел вот такой дизайн (все картинки кликабельны) :-

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

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

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

В ПЕРВОМ ОКНЕ  находится блочное содержимое практически всего вашего сайта,т.е все теги и скрипты из которых и состоит ваш сайт,но это только блочный состав вашего сайта,все содержимое для выравнивания и контроля за размером,а также за тональностью изменения цветовой гаммы каждого блока (т.е все цвета которые находятся у вас на сайте,кроме цвета картинок) находятся во ВТОРОМ ОКНЕ.При прокрутке колесиком мыши всего содержимого в ПЕРВОМ ОКНЕ (слева) ,вы наверняка заметите,как при наведении курсора мыши на определенный блок находившийся в открывающем и закрывающем теге <div></div> происходят определенные изменения на самом сайте,т.е предположим при наведении на тег header,который находится в блочном элементе в открывающем и закрывающем теге <div>ЗДЕСЬ СОДЕРЖИМОЕ БЛОКА header</div> у вас выделяется определенная часть вашего сайта синим цветом.Вот то,что у вас на сайте выделяется синим цветом- это и есть определенная область вашего сайта,на которую вы наводите курсор мыши при помощи ПЕРВОГО ОКНА.Выделения синим цветом обозначаются квадратами у которых с левой нижней стороны идет надпись с размерами наведенными вами курсором мыши блоками в ПЕРВОМ ОКНЕ,таким образом мы можем узнать при помощи ПЕРВОГО ОКНА размер любой части вашего сайта.Также при помощи метода тыка,блуждая по ПЕРВОМУ ОКНУ вы можете найти блок который содержит в себе все параметры вашей шапки,так как,она выделится синим цветом с ее размерами,при наведении курсором мыши на ее блок находящийся в ПРАВОМ ОКНЕ.А если кардинально сказать:- Вам нужно найти в содержимом ПРАВОГО ОКНА,блок который содержит в себе тег header- это и будет содержимое вашей шапки.При нахождении блока с тегом header выделяющего полностью вашу шапку синим цветом при наводки на него курсором мыши в ПРАВОМ ОКНЕ,вам нужно будет нажать левой кнопкой мыши на найденный вами блок в ПЕРВОМ ОКНЕ,чтобы зафиксировать ее и увидеть остальные параметры вашей шапки,которые после зафиксирования,появятся во ВТОРОМ ОКНЕ,там вы можете посмотреть не только размеры своей шапки но и все расстояния которые заданы для фиксирования блока вашей шапки и т.д,а самое главное:- Вы можете посмотреть в какой папке находится ваша шапка и какой путь прописан к ней,чтобы она корректно отображалась у вас на сайте.

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

#header {
background: url("../img/header.png") no-repeat;
width: 697px;
height: 245px;
padding: 49px 0 0 265px;
}

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

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 (обновить) и что мы видем в итоге:- Вуаля!!!У вас новая шапка с нормальным визуальным отображением!На этой замечательной ноте я думаю заканчивать этот немаленький пост и предложить вам прокомментировать  все вышесказанное,вполне возможно я что либо упустил,напишите в комментариях,что именно я упустил тем самым помогайте друг другу разобраться в этой теме поглубже.Вы должны знать и понимать,как нам всем важна ВЗАИМОПОМОЩЬ,которая требуется нам как в жизни так и в интернете!Если вам понравилась статья,подписывайтесь на обновления блога,чтобы быть всегда в курсе новых статей на ProfKatalog.ru