|
|
|
|
3 Урок. Работаем с фоном сайта. Автор: Андрей Краснокутский Дата: 2009-02-25 Как использовать фоновые изображения.В преведущем уроке мы научились создавать правила в таблице стилей и привязывать эти правила к определенным тегам и элементам, придавая тем самым определенный вид этим элементам. Сегодня мы поговорим о придании цвета фону сайта и о фоновых изображениях для сайта. Сейчас фон нашего сайта по умолчанию имеет белый цвет. Но для придания сайту индивидуальности можно ведь задать фону любой цвет. Проще всего это сделать переопределив в таблице стилей значения тега body. Цвет фона в CSS (или какого либо элемента) определяется свойством backdround-color: . Задается цвет так же как и в HTML, т.е. либо прописывается название цвета либо его шестнадцатеричное значение смотри таблицу базовых цветов. Открываем таблицу стилей и прописываем такое правило: Листинг 3.1.
Цвет нашей страницы изменился с белого на темно-синий. Причем изменился как цвет фона, так и цвет самой web-страницы. Чтобы отделить фон от цвета страницы, давайте зададим все тот же белый цвет нашей web-странице. Так как в основе страницы у нас лежат таблицы (табличный дизайн), прописываем в таблице стилей еще одно правило отображения фона внутри таблиц, а именно: Листинг 3.2.
Теперь у нас цвет фона темно-синий, а цвет внутри страницы белый. Запоминаем, что свойство backdround-color: отвечает за цвет фона элемента. Как вы уже заметили - это свойство можно применять к любым элементам. Например задать цвет фона можно любому абзацу или отдельно взятой ячейке в таблице. Причем как Вы понимаете цвет можно тоже задать любой по Вашему вкусу. Посмотрите что у нас получилось. Естественно можно задать одинаковый цвет как фона так и самой web-страницы , в этом случае все сольется и будет смотреться одной монолитной страницей - это уже Ваш дизайнерский вкус. Следующее важное и интересное свойство применяемое для создания фона на веб-страницах - это background-image:url(bg.jpg). Это свойство позволяет применить в качестве фона графический файл. Здесь мы должны указать url т.е. путь где лежит этот графический файл, который будет использоваться в качестве фона и естественно название самого файла. В данном случае файл bg.jpg лежит в общей папке, поэтому путь указывать не требуется. Полностью это правило выглядит вот так: Листинг 3.3.
Посмотрите, что у нас получилось. С помощью графических файлов можно придавать фону на web-странице очень красивые эффекты. Что собой представляет фоновый файлик bg.jpg ? Это обычный графический файл размером (в данном случае) 50х50 px (обычно не более 100х100 px) на котором изображена структура кожи. Этот файл по умолчанию автоматически помещается CSS в верхний левый угол web-страницы и так же автоматически размножается : по горизонтали: слева на право и по вертикали: сверху вниз. Хотя можно задать и другие параметры размножения. Размножаясь этот файл заполняет собой всё свободное пространство. В качестве фонового изображения можно применять любые графические файлы (картинки, фотографии и т.д.). На просторах интернета можно найти великое множество коллекций различных фоновых изображений. Несколько позже мы с вами научимся делать такие фоновые изображения самостоятельно. Например мне больше нравится второй вариант нашего фонового изображения и в дальнейшем мы будем работать с этим вариантом. И теперь листинг файла style.css нашей таблицы стилей CSS имеет вот такой код: Листинг 3.4.
В следующем уроке мы будем учиться делать рамки как для всего сайта, так и для отдельных элементов.
Читайте также: "Психология продаж". Как создать приносящие прибыль рекламные тексты. "Учимся делать сайт за 11 уроков". Скачать бесплатно. Практическое руководство. "Как сделать электронную книгу в .EXE формате" Добавляем "стрелку" перед ссылкой. Как заработать в Интернете на продаже ссылок?
Просмотров: 22768 Поделитесь этой информацией со своими друзьями! Комментарии к этой статье (уроку): Комментарии добавил(а): Анатолий Здравствуйте Андрей. Ваши уроки очень информативны, читаю их с удовольствием, но применить не могу, поскольку работаю в программе Сайткрафт. хотелось бы поставить на сайт Ваш фон GIF (например, ночное небо с мигающими звездам), но в сайткрафте это не получается. А как решить эту проблему не знаю... Анатолий http://samodelki1.ru Комментарии добавил(а): dendya Добрый день, свойство "background-color" в вашей версии notepad++ заменено на "background" - мучался 2 часа :( А вообще сайт норм! Комментарии добавил(а): АндрейК Уважаемый dendya, читайте внимательно и вникайте: background-color и просто background - это разные вещи Комментарии добавил(а): Maxim Спасибо за ваши уроки, очень позновательные. Но у меня вопрос. Все как бы раньше (в предыдущих уроках) получалось, но в этом начались проблемы. Я пытался сам разобраться, но ничего, потом уже проста вставил ваш Листинг 3.4 в свой файл, но четно. Фон как не менялся так и не меняется. В чем может быть причина? Комментарии добавил(а): Torysan Огромное спасибо за урок! А как сделать фон неподвижным, чтобы только страница прокручивалась? Добавить Ваш комментарий: |
Новости сайта Домены 
Google Adsense |
Навигация
Видео Курсы
Последние заметки
Новости сайта
Архив 2016 год: 2015 год: 2014 год: 2013 год: 2012 год: 2011 год: 2010 год: 2009 год: 2008 год: Сайты друзей Наши ссылки
Если Вам понравился  Наши Аттестаты
|
|
Разрешается полное или частичное копирование материалов сайта с обязательным |