Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

3 Урок. Работаем с фоном сайта.

Автор: Андрей Краснокутский

Дата: 2009-02-25

Как использовать фоновые изображения.

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

Сегодня мы поговорим о придании цвета фону сайта и о фоновых изображениях для сайта.

Сейчас фон нашего сайта по умолчанию имеет белый цвет. Но для придания сайту индивидуальности можно ведь задать фону любой цвет. Проще всего это сделать переопределив в таблице стилей значения тега body. Цвет фона в CSS (или какого либо элемента) определяется свойством backdround-color: . Задается цвет так же как и в HTML, т.е. либо прописывается название цвета либо его шестнадцатеричное значение смотри таблицу базовых цветов.

Открываем таблицу стилей и прописываем такое правило:

Листинг 3.1.

body {background-color:#0С3445;}

Цвет нашей страницы изменился с белого на темно-синий. Причем изменился как цвет фона, так и цвет самой web-страницы. Чтобы отделить фон от цвета страницы, давайте зададим все тот же белый цвет нашей web-странице. Так как в основе страницы у нас лежат таблицы (табличный дизайн), прописываем в таблице стилей еще одно правило отображения фона внутри таблиц, а именно:

Листинг 3.2.

table {background-color:#ffffff;}

Теперь у нас цвет фона темно-синий, а цвет внутри страницы белый.

Запоминаем, что свойство backdround-color: отвечает за цвет фона элемента. Как вы уже заметили - это свойство можно применять к любым элементам. Например задать цвет фона можно любому абзацу или отдельно взятой ячейке в таблице. Причем как Вы понимаете цвет можно тоже задать любой по Вашему вкусу.

Посмотрите что у нас получилось.

Естественно можно задать одинаковый цвет как фона так и самой web-страницы , в этом случае все сольется и будет смотреться одной монолитной страницей - это уже Ваш дизайнерский вкус.

Следующее важное и интересное свойство применяемое для создания фона на веб-страницах - это background-image:url(bg.jpg). Это свойство позволяет применить в качестве фона графический файл. Здесь мы должны указать url т.е. путь где лежит этот графический файл, который будет использоваться в качестве фона и естественно название самого файла. В данном случае файл bg.jpg лежит в общей папке, поэтому путь указывать не требуется. Полностью это правило выглядит вот так:

Листинг 3.3.

body {background-image:url(bg.jpg);}

Посмотрите, что у нас получилось. С помощью графических файлов можно придавать фону на web-странице очень красивые эффекты.

Что собой представляет фоновый файлик bg.jpg ? Это обычный графический файл размером (в данном случае) 50х50 px (обычно не более 100х100 px) на котором изображена структура кожи. Этот файл по умолчанию автоматически помещается CSS в верхний левый угол web-страницы и так же автоматически размножается : по горизонтали: слева на право и по вертикали: сверху вниз. Хотя можно задать и другие параметры размножения. Размножаясь этот файл заполняет собой всё свободное пространство.

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

Например мне больше нравится второй вариант нашего фонового изображения и в дальнейшем мы будем работать с этим вариантом.

И теперь листинг файла style.css нашей таблицы стилей CSS имеет вот такой код:

Листинг 3.4.

body {background-image:url(bg.jpg);}

table {background-color:#ffffff;}

p {font-family:Verdana, Arial;
font-size:12px;
color:#000066;
margin:15px;
}

.red {font-family:Verdana, Arial;
font-size:16px;
color:#FF0000;
margin:15px;
font-weight: bold;
}

h2 {color:#FF0000;}

.green {
font-family:Verdana, Arial;
font-size:14px;
color: green;
}

В следующем уроке мы будем учиться делать рамки как для всего сайта, так и для отдельных элементов.

 

Читайте также:

"Психология продаж". Как создать приносящие прибыль рекламные тексты.

"Учимся делать сайт за 11 уроков". Скачать бесплатно.

Практическое руководство. "Как сделать электронную книгу в .EXE формате"

Добавляем "стрелку" перед ссылкой.

Как заработать в Интернете на продаже ссылок?

 

Просмотров: 16580


Поделитесь этой информацией со своими друзьями!


Комментарии к этой статье (уроку):

Комментарии добавил(а): Анатолий
Дата: 2010-01-14

Здравствуйте Андрей. Ваши уроки очень информативны, читаю их с удовольствием, но применить не могу, поскольку работаю в программе Сайткрафт. хотелось бы поставить на сайт Ваш фон GIF (например, ночное небо с мигающими звездам), но в сайткрафте это не получается. А как решить эту проблему не знаю... Анатолий http://samodelki1.ru

Комментарии добавил(а): dendya
Дата: 2010-11-10

Добрый день, свойство "background-color" в вашей версии notepad++ заменено на "background" - мучался 2 часа :( А вообще сайт норм!

Комментарии добавил(а): АндрейК
Дата: 2010-11-10

Уважаемый dendya, читайте внимательно и вникайте: background-color и просто background - это разные вещи

Комментарии добавил(а): Maxim
Дата: 2011-03-02

Спасибо за ваши уроки, очень позновательные. Но у меня вопрос. Все как бы раньше (в предыдущих уроках) получалось, но в этом начались проблемы. Я пытался сам разобраться, но ничего, потом уже проста вставил ваш Листинг 3.4 в свой файл, но четно. Фон как не менялся так и не меняется. В чем может быть причина?

Комментарии добавил(а): Torysan
Дата: 2011-05-05

Огромное спасибо за урок! А как сделать фон неподвижным, чтобы только страница прокручивалась?

Добавить Ваш комментарий:

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео курс по созданию сайтов: Сайт от А до Я
С нами сделать сайт
сможет даже Ребёнок!
"Сайт от А до Я"
Узнать сейчас >>>


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Деревянные дома от СПК "Ванда"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT