Как изменить фон сайта

Как поменять фон сайта на Ucoz (часть 2) инструкция со скринами

Как поменять фон сайта на ucoz

Эта статья из серии записей Как поменять фон сайта, до этого мы говорили о том, как поменять фон сайта wordpress .

Сегодня я Вам расскажу о том, как поменять фон сайта Ucoz быстро и без особых усилий.

Итак, начнем.

Сначала давайте определимся, какой именно фон мы будем менять:

  • Верхняя часть сайта (header).
  • Средняя часть сайта (body).
  • Нижняя часть сайта (footer).
  • Комментарии.

Как поменять фон Header на ucoz-сайте

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

Заходим в панель управления, переходим в раздел Дизайн -> Управление дизайном (шаблоны). Там мы выбираем вкладку Верхняя часть сайта и видим очень много кода, который растянут в левую сторону (по крайней мере у меня он растянут так, а не вниз, как обычно). Нас интересуют только значения background. Чтобы найти все эти значения, воспользуемся поиском браузера (нажимаем Ctrl+F и вводим background).

Как подобрать и установить качественный фон для сайта в два клика?

Находим все значения background и добавляем к background часть -color в итоге должно получиться так: background-color:. Дальше изменяем то, что после background-color:, здесь мы пишем код цвета, который мы

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

background:url(‘здесь_url_картинки’)

Картинку перед этим надо загрузить на Ваш сайт через файловый менеджер. Например, если я загружу картинку и она будет доступна по адресу http://partnerki-runeta.ucoz.ru/money.jpg, то параметр background будет выглядеть так:

background:url(‘htt/partnerki-runeta.ucoz.ru/money.jpg’)

С этим все понятно, надеюсь.

Изменить фон комментариев на ucoz

Сейчас мы находимся во вкладке Верхняя часть сайта, для изменения комментариев нам надо перейти во вкладку Вид комментариев и найти там примерно такой код:

<div class="cMessage"></div>

Чтобы изменить фон комментариев, добавляем к этому коду параметр background и указываем в нем закодированный цвет, код должен выглядеть в итоге примерно так:

<div class="cMessage"></div>

Фон комментариев при этом будет оранжевый. Также можно сделать фон картинкой.

Как изменить фон body в ucoz

Переходим во вкладку Страницы сайта и ищем там примерно такой вот код:

Наверное, Вы уже догадались, что здесь надо изменить параметр background-color.

Категория: Веб-программирование

Похожие статьи:

Как вставить/поменять логотип в шаблоне WordPress

Как поменять программу для открытия файла?

Как поменять лицо в фотошопе. Подробный урок

Как в Фотошопе поменять фон?

Как в Windows 7 поменять обои (включая версию Starter)?

Изменение фона страницы

Содержание:

Изменение цвета фона
Установка фонового изображения на сайт
Настройки фона
Очень важная рекомендация

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

Вы увидите две вкладки "Фон" и "Фон сраницы". Чтобы вы не путались, уточним:

Изменение цвета

Для того, чтобы изменить цвет фона, просто кликните на прямоугольник напротив пункта "Цвет фона", после чего появится окошко палитры, где вы сможете выбрать цвет. 

Установка фонового изображения на сайт

Если вы хотите установить в качестве фона картинку, то кликните на квадрат под надписью "Фоновая картинка".

Появится окно с выбором файлов. Вы можете выбрать одну из имеющихся в шаблоне картинок или загрузить свою.

Загрузить своё изображение можно перейдя по ссылке "Загрузить файл", а затем выбрав файл, хранящийся на вашем компьютере, или просто перетащив файл с изображением в зону слева от кнопки "Загрузить файл", отмеченную  пунктиром.

В нашем случае мы выберем паттерн из библиотеки фонов. Библиотека фонов, как  и библиотека клипартов доступна в редакторе конструктора для всех.

Настройки фона

Теперь можно настроить параметры отображения загруженного вами изображения. 

Давайте подробнее разберем, что здесь можно настроить:

  • • Повторение — загруженная вами картинка будет повторяться по горизонтали, вертикали, а если выберете пункт просто "Повторять", то в обоих направлениях. 
     
  • • Позиция — изменяет расположение картинки, расположенной на фоне.
     
  • • Масштаб — как понятно из названия, данная опция масштабирует изображение, т.е. изменяет его размер.

    изменить фон css

    Давайте разберем этот пункт подробнее. Тут есть три варианта выбора.
    "Автоматически" — оставляет размер изображения по умолчанию.
    "Перекрыть" — растягивает изображение на весь экран. Если отношения сторон изображения и экрана не совпадают, то изображение автоматически обрезается. 
    "Вместить" — растягивает изображение на ту часть экрана, которую вы выбрали в пункте "Позиция".
     

  • • Отображение — тут можно настроить, будет ли изображение прокручиваться вместе со страницей или будет находится статично на одном месте.

Очень важная рекомендация  

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

Вот так делать не надо! Это очень плохо!


 

Берегите глазки ваших посетителей и они отплатят вам благодарностью и высоким поведенческим фактором. На этом всё. Красивых сайтов вам и удачи! 
 

Как поменять фон сайта на Ucoz (часть 2) инструкция со скринами

Как поменять фон сайта на ucoz

Эта статья из серии записей Как поменять фон сайта, до этого мы говорили о том, как поменять фон сайта wordpress .

Сегодня я Вам расскажу о том, как поменять фон сайта Ucoz быстро и без особых усилий.

Итак, начнем.

Сначала давайте определимся, какой именно фон мы будем менять:

  • Верхняя часть сайта (header).
  • Средняя часть сайта (body).
  • Нижняя часть сайта (footer).
  • Комментарии.

Как поменять фон Header на ucoz-сайте

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

Заходим в панель управления, переходим в раздел Дизайн -> Управление дизайном (шаблоны). Там мы выбираем вкладку Верхняя часть сайта и видим очень много кода, который растянут в левую сторону (по крайней мере у меня он растянут так, а не вниз, как обычно). Нас интересуют только значения background.

Как изменить цвет фона и текста веб-страницы?

Чтобы найти все эти значения, воспользуемся поиском браузера (нажимаем Ctrl+F и вводим background). Находим все значения background и добавляем к background часть -color в итоге должно получиться так: background-color:. Дальше изменяем то, что после background-color:, здесь мы пишем код цвета, который мы

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

background:url(‘здесь_url_картинки’)

Картинку перед этим надо загрузить на Ваш сайт через файловый менеджер. Например, если я загружу картинку и она будет доступна по адресу http://partnerki-runeta.ucoz.ru/money.jpg, то параметр background будет выглядеть так:

background:url(‘htt/partnerki-runeta.ucoz.ru/money.jpg’)

С этим все понятно, надеюсь.

Изменить фон комментариев на ucoz

Сейчас мы находимся во вкладке Верхняя часть сайта, для изменения комментариев нам надо перейти во вкладку Вид комментариев и найти там примерно такой код:

<div class="cMessage"></div>

Чтобы изменить фон комментариев, добавляем к этому коду параметр background и указываем в нем закодированный цвет, код должен выглядеть в итоге примерно так:

<div class="cMessage"></div>

Фон комментариев при этом будет оранжевый. Также можно сделать фон картинкой.

Как изменить фон body в ucoz

Переходим во вкладку Страницы сайта и ищем там примерно такой вот код:

Наверное, Вы уже догадались, что здесь надо изменить параметр background-color.

Категория: Веб-программирование

Похожие статьи:

Как вставить/поменять логотип в шаблоне WordPress

Как поменять программу для открытия файла?

Как поменять лицо в фотошопе. Подробный урок

Как в Фотошопе поменять фон?

Как в Windows 7 поменять обои (включая версию Starter)?

Изменение фона страницы

Содержание:

Изменение цвета фона
Установка фонового изображения на сайт
Настройки фона
Очень важная рекомендация

Вы можете изменить цвет фона страницы или поставить в качестве фона изображение.

Как изменить фон сайта?

Чтобы сделать это, в редакторе откройте настройки страницы, кликнув на знак шестеренки.  

Вы увидите две вкладки "Фон" и "Фон сраницы". Чтобы вы не путались, уточним:

Изменение цвета

Для того, чтобы изменить цвет фона, просто кликните на прямоугольник напротив пункта "Цвет фона", после чего появится окошко палитры, где вы сможете выбрать цвет. 

Установка фонового изображения на сайт

Если вы хотите установить в качестве фона картинку, то кликните на квадрат под надписью "Фоновая картинка".

Появится окно с выбором файлов. Вы можете выбрать одну из имеющихся в шаблоне картинок или загрузить свою.

Загрузить своё изображение можно перейдя по ссылке "Загрузить файл", а затем выбрав файл, хранящийся на вашем компьютере, или просто перетащив файл с изображением в зону слева от кнопки "Загрузить файл", отмеченную  пунктиром.

В нашем случае мы выберем паттерн из библиотеки фонов. Библиотека фонов, как  и библиотека клипартов доступна в редакторе конструктора для всех.

Настройки фона

Теперь можно настроить параметры отображения загруженного вами изображения. 

Давайте подробнее разберем, что здесь можно настроить:

  • • Повторение — загруженная вами картинка будет повторяться по горизонтали, вертикали, а если выберете пункт просто "Повторять", то в обоих направлениях. 
     
  • • Позиция — изменяет расположение картинки, расположенной на фоне.
     
  • • Масштаб — как понятно из названия, данная опция масштабирует изображение, т.е. изменяет его размер. Давайте разберем этот пункт подробнее. Тут есть три варианта выбора.
    "Автоматически" — оставляет размер изображения по умолчанию.
    "Перекрыть" — растягивает изображение на весь экран. Если отношения сторон изображения и экрана не совпадают, то изображение автоматически обрезается. 
    "Вместить" — растягивает изображение на ту часть экрана, которую вы выбрали в пункте "Позиция".
     
  • • Отображение — тут можно настроить, будет ли изображение прокручиваться вместе со страницей или будет находится статично на одном месте.

Очень важная рекомендация  

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

Вот так делать не надо! Это очень плохо!


 

Берегите глазки ваших посетителей и они отплатят вам благодарностью и высоким поведенческим фактором. На этом всё. Красивых сайтов вам и удачи! 
 

Как изменить цвет текста и фона на странице.

Мы с вами в предыдущих главах составили основной шаблон HTML-документов, определились что такое ХТМЛ-теги, научились сохранять и редактировать html-файлы, а в этой главе мы познакомимся с атрибутами тегов и изменим цвет текста и фона страницы.

Откроем наш index.html, для редактирования: <html> <head> <title>Мой первый сайт</title> </head> <body> У меня получилось!!! </body> </html> И немного его изменим, добавим атрибуты: <html> <head> <title>Мой первый сайт</title> </head> <body text="#000000" bgcolor="#ffffff"> У меня получилось!!! </body> </html>Атрибут — это параметр тега, который вставляется в тег "парой"(имя параметра + значение параметра).
Значения атрибутов тега вставляются:
1) text=#000000 без кавычек;
2) text=’#000000′ в одинарных кавычках;
3) text="#000000" в двойных кавычках.
Любой из этих вариантов правильный, но если заботиться об этике кода, то лучше использовать двойные кавычки, как в моем примере выше.

Атрибут "text" управляет цветом текста на всей странице, а "bgcolor" управляет цветом фона страницы.

Теперь предлагаю поговорить об цветах для ХТМЛ-документов. Цвет задается:
1) text="gold" — словами на английской, допустим: gold(золотой), red(красный), green(зеленый) и так далее…
Но цвет может состоять только из одного слова например "red", но если написать "green-red", то браузер это не поймет и просто проигнорирует.
2) text="#000000" — цветовая схема RBG(красный зеленый синий). "#" этот символ говорит от том что это номер цвета, первые два символа(в моем примере ноли) говорят сколько мы взяли "красного" цвета, вторые зеленого и последние два синего цвета.
Каждый цвет задается от 00 до FF (0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F), например #000000-черный, #ffffff-белый, #ff0000-красный, #00ff00-зеленый#0000ff-синий

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

А теперь вернемся к нашему файлу index.html и сохраним его как tsvet.html, теперь посмотрим что получилось. Каким был, таким и остался?

Как поменять задний фон на сайте

И вы абсолютно правы, т.к белый для фона, а черный для текста цвета по умолчанию. Что-бы заметить разницу изменим значения атрибутов:

<html> <head> <title>Мой первый сайт</title> </head> <body text=gold" bgcolor="#0900b8"> У меня получилось!!! </body> </html> Сохраним и помотрим просмотреть(откроется в новой вкладке)

Есть и другие способы задавать текст в хтмл-файлах, но эти два считаются основными.

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *