Урок№4. Как поменять шапку сайта на ucoz.ru
В этом уроке, Вы узнаете, как сменить шапку сайта ucoz. Хочу напомнить, что уроки по изменению дизайна, представленные на сайте https://webcaum.ru, НЕ являются универсальным решением, т.к. к каждому шаблону сайта нужен индивидуальный подход. Уроки даны лишь для того, чтобы было понимание, как меняются элементы сайта на Юкозе. Прежде чем продолжить, скачайте файлы для дальнейшей работы и разархивируйте их.
В первую очередь нам нужно закачать файл fon.gif. Чтобы закачать его зайдите в раздел: Инструменты -> Файловый менеджер.
Перед Вами появится окно загрузки файлов. Нажмите на кнопку «Обзор», зайдите в папку, где находятся скачанные файлы, и выберите картинку fon.gif. Затем нажмите на кнопку «Загрузить файл».
После загрузки файла fon.gif нажмите на кнопку в виде глаза , чтобы посмотреть в какой директории находится картинка. Вы увидите, что файл находится в коневой папке сайта, т.е. по адресу http://ИМЯ_ВАШЕГО_САЙТА.ucoz.ru/fon.gif. Данный файл будет фоном для шапки нашего сайта. Вы спросите, как такая маленькая картинка может стать фоном для всей области шапки? Дело в том, что данный файл будет размножен в горизонтальной и вертикальной плоскости. И сейчас Вы узнаете, как это сделать.
Зайдите в раздел: Дизайн -> Управление дизайном (CSS).
Вы попадёте в раздел, где мы можем менять данные таблицы стилей (CSS). Если с помощью HTML создаётся структура сайта, то с помощью CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) эта структура украшается. Если Вы не знаете, что такое HTML и CSS, то изучите сначала ниже представленные видеокурсы:
- Бесплатный курс по HTML от Евгения Попова (33 видеоурока)
- Бесплатный курс по CSS от Евгения Попова (45 видеоуроков)
Итак, приступим к изменению дизайна шапки сайта. На 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’);
}
Нажмите кнопку «Сохранить». Обновите главную страницу сайта, и Вы увидите, что шапка теперь выглядит так:
Бывает так, что не сразу браузер показывает изменения, произошедшие на сайте. Это происходит потому, что кэш браузера (копии веб-страниц, уже просмотренных пользователем) не всегда стирается после обновления сайта. Чтобы стереть кэш в таких браузерах, как Mozilla и Internet Explorer, нажмите «CTRL + F5». Если данное сочетание клавиш не работает (например, в Опере), то просто несколько раз нажмите клавишу F5.
Итак, фон шапки сайта мы поменяли. Теперь нужно красиво расположить заголовок «Белый каталог сайтов» в шапке.
Зайдите в раздел: Дизайн -> Управление дизайном (шаблоны).
После чего перейдите в раздел «Верхняя часть сайта».
Обратите внимание на код, который находится на первой строчке:
<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).
После блока стилей #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>.
Нажмите кнопку «Сохранить» и обновите главную страницу сайта. Теперь шапка сайта выглядит так:
Теперь осталось поменять цвет заголовка «Белый каталог сайтов» с чёрного на белый.
Для этого в таблице стилей 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;}
Обновите сайт. Теперь шапка сайта выглядит так:
В этом уроке Вы узнали, как изменить шапку сайта ucoz. В следующем уроке Вы узнаете, как поменять нижнюю часть сайта.
Урок№5. Как поменять нижнюю часть сайта на ucoz.ru
Урок№6. Как изменить меню сайта на ucoz.ru
Урок№7. Как работать с визуальным редактором сайта на ucoz.ru