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


Курс Money Master 3 – продвижение сайтов и обучение заработку в Интернете

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





Урок№5. Как поменять нижнюю часть сайта на ucoz.ru

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

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

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

В таблице стилей нам нужно найти строчку:

#footer {border-top:5px solid #6B6B6B;padding:10px;text-align:center;border-bottom:5px solid #000000;}

Это стиль для нижней части сайта для шаблона #844.

Вместо того кода, который был приведён выше напишите следующее:

#footer {
border-top:2px solid #000000;
padding:10px;
text-align:center;
border-bottom:2px solid #000000;
background: url('/fon.gif');
}

, где
border-top:2px solid #000000; — верхнее подчёркивание сплошной (solid) чёрной (#000000) линией толщиной в 2px.
border-bottom:2px solid #000000; — нижнее подчёркивание сплошной (solid) чёрной (#000000) линией толщиной в 2px.
background: url('/fon.gif'); — означает, что фоном нижней части сайта будет картинка fon.gif, размноженная в горизонтальной и вертикальной плоскости.
padding:10px; — это внутренний отступ в 10px со всех сторон.
text-align:center; — устанавливает по центру все элементы, которые находятся внутри блока <div id="footer"></div>, т.е. внутри нижней части сайта.

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

низ сайта на ucoz

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

Цвет ссылок сливается с фоном футера

Я предлагаю заменить цвет ссылок на белый. Для этого на следующей строчке в таблице стилей нужно написать следующие коды:

#footer a {text-decoration:underline; color:#ffffff;}
#footer a:hover {text-decoration:none; color:#ffffff;}

, где
#footer a {text-decoration:underline; color:#ffffff;} — означает, что цвет неактивной ссылки будет белый (color:#ffffff;), а сама ссылка будет подчёркнута (text-decoration:underline;)
#footer a:hover {text-decoration:none; color:#ffffff;} — означает, что цвет ссылки при наведении на неё будет белый (color:#ffffff;), а сама ссылка не будет подчёркнута (text-decoration: none;)

Нажмите «Сохранить». Как видим, ссылки больше не сливаются с фоном нижней части сайта.

ссылки больше не сливаются с фоном нижней части сайта

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

В целом теперь наш сайт выглядит вот так.

Нам осталось доработать верхнее, левое и правое меню. Изменить цвет ссылок и цвет заголовка в содержимом сайта. И всё, наш сайт будет готов!

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

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

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

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

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

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

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

Метки:

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

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

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