Поміняти шапку сайту ucoz

1. Як дізнатися розмір шапки Спосіб №1
2. Давайте тепер трохи розберемося в даному коді:
3. Як дізнатися розмір шапки Спосіб №2
4. Міняємо картинку вашої шапки.
5. Міняємо розмір картинки вашої майбутньої шапки.

Наша взаимовыгодная связь https://banwar.org/

Вітаю дорогий мій передплатник, читач або просто випадково зайшов перехожий! У цьому пості я вирішив торкнутися теми яка цікавить багатьох початківців веб-майстрів, а також просто бажаючих видозмінити шапку (верхівку) свого недавно встановленого шаблону ...

Який ми з вами встановили в минулій статті Як поміняти шаблон (дизайн) на сайті ucoz .В результаті моїх міркувань в цій статті у мене вийшов ось такий дизайн (всі картинки клікабельні): -

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

Як дізнатися розмір шапки Спосіб №1

Цей спосіб в основному для тих хто не має в наявності придбаний або завантажений шаблон, якщо у вас все-таки є в наявності сам шаблон вашого сайту, тоді сміливо можете приступити до вивчення способа№2, але якщо все таки вам цікавий цей спосіб або просто у вас немає в наявності шаблону вашого сайту, тоді продовжимо: -

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

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

У ПЕРШОМУ ВІКНІ знаходиться блочне вміст практично всього вашого сайту.

Тобто все теги і скрипти з яких і складається ваш сайт. Але це тільки блоковий склад вашого сайту, весь вміст для вирівнювання і контролю за розміром, а також за тональністю зміни колірної гами кожного блоку (тобто всі кольори які знаходяться у вас на сайті, крім кольору картинок) знаходяться у ДРУГОМУ ВІКНІ.

При прокручуванні коліщатком миші всього вмісту в ПЕРШОМУ ВІКНІ (ліворуч), ви напевно помітите, як при наведенні курсору миші на певний блок знаходився в відкриває і закриває тезі <div> </ div> відбуваються певні зміни на самому сайті.

Тобто припустимо при наведенні на тег header, який знаходиться в блоковому елементі в відкриває і закриває тезі <div> ТУТ ЙОГО БЛОКУ header </ div> у вас виділяється певна частина вашого сайту синім кольором.

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

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

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

Так як, вона виділиться синім кольором з її розмірами, при наведенні курсором миші на її блок знаходиться в ПРАВОМ ВІКНІ.

А якщо кардинально сказати: - Вам потрібно знайти у вмісті ПРАВОГО ВІКНА, блок який містить в собі тег header- це і буде вміст вашої шапки.

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

Щоб зафіксувати її і побачити інші параметри вашої шапки, які після зафіксованого, з'являться у ДРУГОМУ ВІКНІ.

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

Ви можете подивитися в якій папці знаходиться ваша шапка і який шлях прописаний до неї, щоб вона коректно відображалася у вас на сайті.

У ДРУГОМУ ВІКНІ, де знаходяться ВСЕ ДАНІ ВАШОЇ ШАПКИ ви знайдете приблизно такий код:

[Html] #header {
background: url (& amp; quot; ../ img / header.png & amp; quot;) 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 (оновити) і що ми видем в результаті: - Вуаля !!! У вас нова шапка з нормальним візуальним відображенням!

На цій чудовій ноті я думаю закінчувати цей немаленький пост і запропонувати вам прокоментувати все вищесказане.

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

Ви повинні знати і розуміти, як нам всім важлива ВЗАЄМОДОПОМОГА, яка потрібна нам як в житті так і в інтернеті!

Якщо вам сподобалася стаття, підписуйтесь на оновлення блогу, щоб бути завжди в курсі нових статей на ProfKatalog.ru