Дизайн сайта на Ucoz. Как поменять фон - Про Ucoz - Программы фильмы онлайн смотреть игры все длЯ компа - Мир софта программы
Понедельник, 05.12.2016
Игры проги фильмы софт Трафик для мегалайнеров не учитыва...
Меню сайта
Категории раздела
Уроки Photoshop [0]
Photoshop [0]
Кисти для Photoshop [0]
Стили для Photoshop [2]
Рабочий стол [0]
Плагины для Photoshop [3]
Остальное [0]
Софт [0]
Фильмы скачать [0]
Игры [0]
Windows 7 [4]
Статьи [0]
Заработок [1]
Про Ucoz [11]
Про DLE [0]
Вебмастерам [4]
Клипарты [0]
Мини-чат
Наш опрос
Ваш интерес
Всего ответов: 295
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Форма входа
Главная » Файлы » Про Ucoz

Дизайн сайта на Ucoz. Как поменять фон
27.04.2011, 17:47

изменить фон На форуме одним из популярных вопросов, который мне задают, это вопрос о том, как поменять фон на сайте. Это первое, что часто хотят сделать при создании сайта новички. Именно для Вас, новичков, я и предлагаю это статью. Постараюсь рассмотреть все возможные случаи и рассказать о них на понятном языке.

Итак, давайте по порядку. Первое, о чем Вам нужно задуматься, если Вы решили поменять фон, это то, как он должен себя вести при разных расширениях монитора. Большинство новичков об этом совершенно забывают. А ведь мониторы у всех разные, поэтому это обязательно надо иметь в виду. Давайте разберемся, какие варианты возможны:
1. Вы задаете фон просто цветом. Этот вариант легко реализовать. Он не будет долго грузиться и будет одинаково выглядеть абсолютно на всех мониторах и браузерах. Но многим хочется красоты. Поэтому идем дальше
2. Можно задать фон из картинки, которая может повторяться по вертикали или по горизонтали, или по обоим направлениям. Как пример, вот картинка фона шапки на этом сайте

Как видите, этот кусочек фона можно повторять по ширине столько раз, сколько понадобится, чтобы заполнить всю ширину экрана монитора.
3. Но если и это вам не подходит, и Вы хотите поставить картинку, например, какой-то пейзаж. То тут возможны 3 варианта
3.1. Можно сделать картинку под самый маленький монитор (обычно это 1024px) и разместить этот фон по центру , плюс задать цвет фона, который будет заполнять свободное место там, где не будет картинки при более больших размерах монитора.
3.2. Можно сделать картинку автоматически масштабируемую под размеры монитора, но это работает не во всех браузерах, например, не работает в Internet Explorer. Поэтому такой вариант подойдет очень немногим.
3.3. Последний вариант - это скорее дополнительный момент к 2 предыдущим: фон может заполнять все пространство страницы, а может совпадать с размером монитора и при прокручивании страницы оставаться неподвижным.
Вот, в общем-то, и все варианты. Если определились, давайте начнем.
Фон страницы обычно задается в теге <body> с помощью свойства background.
Возможны два варианта:
1. свойство может быть задано прямо в шаблоне страницы
2. свойство может быть прописано в таблице CSS
Причем, если свойство прописано и там, и там, то сработает то, что написано в шаблоне.
Если свойство прописано в шаблоне, то выглядит оно примерно так:
<body style="background: #FcFcFc;">
свойств внутри может быть гораздо больше, они перечисляются через запятую, но нас интересует только свойство background
если оно прописано в таблице css, то в шаблоне будет просто
<body>
а в таблице css примерно так:
body {background: #FcFcFc;}
В чем тут принципиальное отличие? В том, что если у Вас первый вариант , изменения придется производить во всех используемых шаблонах: шаблоне каталога статей, шаблоне модуля новостей и так далее. Тут Вам будет полезна функция Быстрая замена участков кода. Вам необходимо будет сначала настроить код в шаблоне страницы сайта. А потом зайти в Меню - Дизайн -Быстрая замена участков шаблона - Что заменить - вставляете код <body .......> , какой он остался в изначальных шаблонах , На что заменить: - новый код . Тогда замена будет проведена во всех шаблонах. Другой вариант. Сразу заменить изначальный код на просто <body>, и тогда уже все изменения надо будет делать только в таблице css (вариант 2)
Итак, с основными моментами разобрались. А теперь разберем и все свойства. Я буду приводить примеры кода, которые соответственно Вы сможете внедрить следующим образом:
- в шаблоне страницы
<body style="пример кода">
- в таблице CSS
body {пример кода}
1. Задаем фон прост цветом
background: #FcFcFc;
цвета очень хорошо можно подобрать здесь : Подбор цвета
2. Задаем фон картинкой
background: url('адрес картинки');
3. Задаем фон картинкой, которая будет повторяться по горизонтали
background: url('адрес картинки') repeat-x;
4. Задаем фон картинкой, которая будет повторяться по вертикали
background: url('адрес картинки') repeat-y;
5. Задаем фон картинкой, которая будет повторяться и по горизонтали, и по вертикали
background: url('адрес картинки') repeat;
6. Задаем фон картинкой, которая будет по центру горизонтали и по верху по вертикали
background: url('адрес картинки') 50% 0%;
7. Задаем фон картинкой, которая будет по центру горизонтали и по верху по вертикали , плюс цвет, там, где картинки не будет
background:#fcfcfc url('адрес картинки') 50% 0%;
8. Задаем фон картинкой, которая не будет прокручиваться при прокручивании страницы
background:#fcfcfc url('адрес картинки') 50% 0%;background-attachment: fixed;
9. Задаем фон картинкой, которая будет масштабироваться
background: url('адрес картинки');background-size:100%;

Категория: Про Ucoz | Добавил: daukebak
Просмотров: 10485 | Загрузок: 0 | Комментарии: 16 | Рейтинг: 3.0/2
Всего комментариев: 141 2 »
Комментарий #14
Написал: Андрей   |   19.11.2013

Книги в формате FB2
0  
Комментарий #13
Написал: никто   |   29.09.2013

sabik.ucoz.com
sabik.ucoz.com
sabik.ucoz.com
sabik.ucoz.com
sabik.ucoz.com
sabik.ucoz.com
sabik.ucoz.com
sabik.ucoz.com
sabik.ucoz.com
sabik.ucoz.com
sabik.ucoz.com
0  
Комментарий #12
Написал: Гости   |   15.09.2013

вот здесь нашел реальный ghb xtv ,tcgkfnyj способ а другие не помогали
http://glushko.at.ua/index/kak_pomenjat_favikon_na_jukoz/0-4
0  
Комментарий #11
Написал: ogarok   |   23.12.2012

http://yopsi-mopsi.ru/ Новинки софта
http://soft-tvv.ru/ Скачать музыку mp3 песни бесплатно
http://yopsi-mopsi.ru.com/ Музыка скачать бесплатно
http://softket.ru/ Программы софт
http://softpes.ru/ Cкачать бесплатный софт
0  
Комментарий #10
Написал: b-n   |   15.12.2012

http://incident.ucoz.com инцидент фотографии, приколы, фото приколы, юмор, юмористические фотографии
0  
Комментарий #9
Написал: Киви   |   05.10.2012

Огромное спасибо за статью. Очень помогла. Я аж вошла в раж и изменила дизайн всех своих сайтов. Хочу отрерайтить Вашу статью и поместить к себе на сайт http://delovaiamama.moy.su/ , если Вы не против. Конечно же с ссылкой на источник.)
0  
Комментарий #8
Написал: igor   |   21.08.2012

Хочешь танк? - http://wot-mods.ucoz.ru
0  
Комментарий #7
Написал: John   |   31.07.2012

Легко,заходиш в редактор страниц и находиш ссылку стираеш ту ссылку и вставляеш свою
0  
Комментарий #6
Написал: gbp.ucoz.ru   |   19.06.2012

gbp.ucoz.ru
0  
Комментарий #5
Написал: tolik   |   18.06.2012

заработать евро на http://10evro.ucoz.ru/ стало легко
0  
1-10 11-14
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Block title
Валюта
Поиск
Друзья сайта
Copyright MyCorp © 2016