Урок№2. Как изменить заголовок в шапке на ucoz.ru. Как на ucoz изменить шапку ucoz


Поменять шапку сайта ucoz - легко и быстро!

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

Который мы с вами установили в прошлой статье Как поменять шаблон (дизайн) на сайте 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

profkatalog.ru

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

yraaa.ru

Урок№2. Как изменить заголовок в шапке на ucoz.ru

Прежде чем приступить к уроку, убедитесь в том, что Вы выбрали дизайн #844. Для этого в панели управления сайта (напоминаю, что админка ucoz находится по адресу http://ИМЯ_ВАШЕГО_САЙТА.ucoz.ru/admin) нужно нажать на кнопку «Настройки» в левом верхнем углу, после чего перейти в раздел «Общие настройки». Там, где стоит пункт «Дизайн сайта» Вы увидите, какой шаблон выбран. Если у Вас другой шаблон, то выберите нужный, нажав ссылку [ Выбрать дизайн ] -> Общее -> Дизайн #844, после чего нажмите кнопку «Сохранить».

Зайдите на главную страницу сайта. Обратите внимание: не смотря на то, что мы в настройках дали сайту название «Белый каталог сайтов» в шапке сайта в левом верхнем углу оно не поменялось. Как же поменять заголовок «Мой сайт» на «Белый каталог сайтов»? Очень просто! Для этого нужно сначала зайти в раздел: Дизайн -> Управление дизайном (шаблоны) (в этом разделе проводятся все работы по изменению дизайна сайта).

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

Перед Вами появится HTML-код верхней части сайта. Чтобы изменить заголовок нажмите на кнопку «Визуальный HTML редактор» и вместо заголовка «Мой сайт» напишите: Белый каталог сайтов. Чтобы сохранить изменения нажмите на кнопку в виде дискеты.

После этого Вы увидите, что в HTML-коде произошли некоторые изменения, в частности, обратите внимание на первую строчку кода:

<div><h2>Белый каталог сайтов</h2></div>

Как видите, между тегами <div><h2></h2></div> стоит нужный нам заголовок. Теперь, чтобы изменения вошли в силу, нажмите на кнопку «Сохранить».

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

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

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

Опубликовал admin 30 сентября, 2012 | Комментариев нет | Просмотров: 18,628

Рейтинг заметки:

 Loading ...

Размещено в рубрике: Сайт на UCOZ

Метки: ucoz

Если Вам понравились материалы сайта http://webcaum.ru, и Вы хотите отблагодарить автора данного ресурса, то скопируйте код баннера, который представлен ниже, и вставьте его на любой странице Вашего сайта.

webcaum.ru

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

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

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

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

<table border="0" cellpadding="0" cellspacing="0">

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

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

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

<table cellpadding="0" cellspacing="0" border="0"><tr><td align="center">

Для того, чтобы просмотреть рисунок, необходимо перед /.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.

Надеюсь, что информация полезна. Будут вопросы, спрашивайте.

Добавлено

Если вы поставите свою шапку,то скорее всего у вас на шапке будет название сайта и вам надо будет убрать изначальное, которое заложено шаблоном. Нажмите в верхнем меню сайта Конструктор -- включить конструктор, удалите название.Вместо него у вас останется три точки. Чтобы убрать их, зайдите в панель управления -- управление дизайном -- глобальные блоки -- верхняя часть сайта. Ваши три точки вы найдете тут: <!-- <logo> --><!-- </logo> -->Удалите их.

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

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

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

ty-blogger.blogspot.com

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

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

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

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

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

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

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

Для того, чтобы просмотреть рисунок, необходимо перед /.s/t/161/1.gif вставить адрес вашего сайта, например, мой тестовый сайт [ссылка заблокирована по решению администрации проекта]. Получим адрес для просмотра нашей картинки [ссылка заблокирована по решению администрации проекта]

Полученный код вставляем в адресную строку браузера и открываем картинку в новой вкладке.

Если вы перейдете по ссылке, то вы увидите в названии картинки размер этого изображения. Например, у меня он составляет 4х269 пикселов. Это тоненькая вертикальная полоска, которая делает мою шапку резиновой.

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

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

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

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

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

Рекомендую перед началом внесения изменений в HTML-код сохранить шаблон на случай непредвиденной ситуации. Поменять цвета ссылок, находящихся на шапке

otvet.mail.ru

Как поменять шапку сайта на ucoz - WEB-мастеру - Каталог статей - Ваш помощник

     В качестве шапки сайта могут использоваться графические файлы форматов jpeg, png, gif. Чтобы поменять шапку, Вам для начала потребуется узнать размеры шапки данного шаблона. Заходим в «Панель управления» сайта через админ – бар. Выбираем «Редактор страниц» - «Управление дизайном модуля». Там находим глобальные блоки – «Верхняя часть сайта». В ней откроется HTML вашей шапки. Если ваша шапка состоит из одного рисунка, то находим примерно такой код. Код в разных шаблонах немного отличается.

<tr><td width="366" rowspan="3"><img src="/.s/t/761/2.jpg"

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

    Если шапка состоит из нескольких рисунков, как у меня, то в HTML – коде чуть больше будет таких строк. Чтобы посмотреть рисунок надо перед:  /.s/t/761/2.jpg вставить адрес вашего сайта. На моем примере это будет выглядеть так:   

http://po4emy4ka.ucoz.ru/.s/t/761/2.jpg

    Просмотрев все картинки в верхней части сайта глобальных блоков, определим, какие картинки относятся к шапке вашего сайта и определим их размер. Узнав размер, мы можем приступить к изготовлению новой шапки. Вы можете нарисовать её сами в «Фотошопе» или заказать в инете. Как только у вас будет готова шапка, делаем его размер как в исходном варианте, после чего загружаем нашу шапку на свой сайт.

Чтобы узнать, как загрузить, я написал статью о том, как залить файл в корневой каталог сайта:

http://po4emy4ka.ucoz.ru/publ/web_masteru/kak_zagruzit_fajl_v_kornevoj_katalog_sajta/2-1-0-2

    Опишу еще раз вкратце. Заходим в ПУ сайта в раздел «Файловый менеджер» и загружаем сюда наш рисунок с жесткого диска. При заливке нужно назвать файл латинскими буквами или цифрами. После загрузки файла вы увидите их в перечне файлов. Нажимая на файл, у вас откроется адрес этой картинки. Узнав адрес рисунка, зайдите в верхнюю часть сайта в глобальных блоках и поменяйте ссылки для шапки в HTML – код.

МЕНЯТЬ НУЖНО ТОЛЬКО АДРЕСА КАРТИНОК ШАПКИ, БОЛЬШЕ НИЧЕГО.

Посмотрим на моем примере:

До:  <tr><td height="218" rowspan="3"><img src="/.s/t/761/2.jpg"

И после:   <tr><td rowspan="3"><img src="/primer.jpg"

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

 

Если я помог кому – то этой статьей, я очень рад.

Благодарю за внимание.

po4emy4ka.ucoz.ru

Как поменять шапку на сайте ucoz - 29 Июня 2014

Как поменять шапку на сайте ucoz? Сделать это просто (ну почти). 

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

В случае 

vse-dlya-ucoz.do.am у нас стандартный юкозовский дизайн 783 и шапка в виде одной картинки вызываемая в таблице стилей CSS: 

 

В CSS стилях шапка вызывается в верхнем блоке сайта таким вот образом: 

#topPick {background:url('/.s/t/843/3.jpg') top left no-repeat;width:820px;}

Ее мы и меняем. 

Загружаем ее с помощью менеджера файлов на сайт в удобную вам директорию. например

vse-dlya-ucoz.do.am/diz

Файл обзовем например header.jpg 

Местоположение новой шапки

vse-dlya-ucoz.do.am/dizhttp://vse-dlya-ucoz.do.am//komp.jpg 

При загрузке не забудьте удостовериться что галка "добавить вотермарк на изображение" убрана. Нам ведь не нужна лишняя надпись на шапке сайта? 

Дальше надо отредактировать шаблон или таблицу CSS стилей где вызывается шапка. Заменяем вызов стандартной шапки на свою: 

/.s/t/843/3.jpg в CSS тилях меняем на http://

vse-dlya-ucoz.do.am/dizhttp://vse-dlya-ucoz.do.am//komp.jpg 

То есть строчка в CSS таблице примет вид:#topPick {background:url('http://vse-dlya-ucoz.do.am/dizhttp://vse-dlya-ucoz.do.am//komp.jpg ') top left no-repeat;width:820px;}

И все, дело в шляпе. Шапка в шляпе, лол =). Наслаждаемся новым видом сайта с новой шапкой. =) 

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

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

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

vse-dlya-ucoz.do.am