Как создать свой сайт
Блог сайтостроителя


Видеокурс «Все Технические Моменты Онлайн Бизнеса в Видеоформате 2 или PHP+MySQL для начинающих»

Рубрика «Вопрос? Ответ!»





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

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

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

Файловый менеджер на ucoz

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

Окно загрузки файлов на ucoz

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

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

Управление дизайном CSS на ucoz

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

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

#logoBlock {padding:50px 20px 10px 20px;border-top:5px solid #000000;}

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

#logoBlock {height:96px;border-top:2px solid #000000;border-bottom:2px solid #000000;background: url('/fon.gif');}

, где
height:96px — это высота шапки в 96px.
border-top:2px solid #000000; — верхнее подчёркивание сплошной (solid) чёрной (#000000) линией толщиной в 2px.
border-bottom:2px solid #000000; — нижнее подчёркивание сплошной (solid) чёрной (#000000) линией толщиной в 2px.
background: url('/fon.gif'); — означает, что фоном шапки будет картинка fon.gif, размноженная в горизонтальной и вертикальной плоскости.

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

#logoBlock {
height:96px;
border-top:2px solid #000000;
border-bottom:2px solid #000000;
background: url('/fon.gif');

}

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

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

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

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

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

Управление дизайном (шаблоны) на ucoz

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

Раздел «Верхняя часть сайта» на ucoz

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

<div id="logoBlock"><h1>Белый каталог сайтов</h1></div>

Добавьте тег <div id="logotip_h1"> с левой стороны от тега <h1> , а с правой стороны от тега </h1> — </div>. Т.е. теперь код на первой строчке должен выглядеть так (красным цветом помечено то, что нужно добавить):

<div id="logoBlock"><div id="logotip_h1"><h1>Белый каталог сайтов</h1></div></div>

После нажмите кнопку «Сохранить». Дополнительные теги мы добавили для того чтобы задать нужный нам фон для области, в которой находится заголовок «Белый каталог сайтов», заключенный в теги <h1></h1>, и сделать отступы для блока <div id="logotip_h1"><h1>Белый каталог сайтов</h1></div> относительно области шапки, т.е. тегов <div id="logoBlock"></div>. В общем, сейчас Вы всё увидите воочию.

Прежде всего, нам нужно закачать файл h1-fon.jpg. Зайдите в «Файловый менеджер» и закачайте его.

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

Управление дизайном CSS на ucoz

После блока стилей #logoBlock {height:96px;border-top:2px solid #000000;border-bottom:2px solid #000000;background: url('/fon.gif');} на следующей строчке напишите следующий код:

#logotip_h1 {
background: url('/h1-fon.jpg') no-repeat;
position: relative;
top:25px;
left:39px;
width:472px;
height:60px;
padding-top:13px;
text-align:center;
}

, где
background: url('/h1-fon.jpg') no-repeat; — фон блока <div id="logotip_h1"></div>, в котором находится заголовок <h1>Белый каталог сайтов</h1>
position: relative; — означает, что положение элемента <div id="logotip_h1"></div> устанавливается относительно всей области шапки <div id="logoBlock"></div>. Добавление свойств left, top, right и bottom изменяет позицию элемента <div id="logotip_h1"></div>.
top:25px; — устанавливает величину отступа в 25px для элемента <div id="logotip_h1"></div> от верхнего края блока <div id="logoBlock"></div>.
left:39px; — устанавливает величину отступа в 39px для элемента <div id="logotip_h1"></div> от левого края блока <div id="logoBlock"></div>.
width:472px; — ширина элемента <div id="logotip_h1"></div> в 472px.
height:60px; — высота элемента <div id="logotip_h1"></div> в 60px.
padding-top:13px; — делает внутренний верхний отступ. Т.е. у элементов, находящихся внутри кода <div id="logotip_h1"></div> (в нашем случае — это заголовок <h1>Белый каталог сайтов</h1>), будет отступ сверху в 13px.
text-align:center; — устанавливает по центру элементы, которые находятся внутри кода <div id="logotip_h1"></div>.

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

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

Теперь осталось поменять цвет заголовка «Белый каталог сайтов» с чёрного на белый.

Для этого в таблице стилей CSS найдите строчку #logoBlock h1 {color:#000000;font-size:24pt;font-weight:normal;margin:0;padding:0;} и замените код #000000, который означает чёрный цвет, на #FFFFFF (белый цвет). Т.е. данная строчка должна теперь выглядеть так (красным цветом отмечено то, что было изменено):

#logoBlock h1 {color:#FFFFFF;font-size:24pt;font-weight:normal;margin:0;padding:0;}

Обновите сайт. Теперь шапка сайта выглядит так:

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

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

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

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

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

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

1 звезда2 звезды3 звезды4 звезды5 звезд (12 голосов, средний: 4.42 из 5)
Loading ... Loading ...

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

Метки:

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

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

© 2011 Все права защищены законодательством РФ.
Автор разрешает использовать материалы сайта только при одном условии – на страницу сайта webcaum.ru, от куда был скопирован материал (или частично скопирован), должна быть проставлена индексируемая ссылка Поднять страницу вверх