Совет 1: Как изменить цвет фона

Если возникает необходимость изменить дизайн сайта, то очень вероятно, что придется менять цвет фона страниц, ведь это фундамент, объединяющий все элементы оформления. Рассмотрим - как сделать это с минимальными усилиями.
Инструкция
1
Цвет фона страниц вашего сайта может быть установлен несколькими способами. Один из них задает значение цвета средствами HTML (HyperText Markup Language - «язык разметки гипертекста»). В html-коде каждой страницы есть блок, который начинается с тега <body> и заканчивается </body> - внутри него, собственно, и находится описание содержимого страницы. В открывающем теге этого блока <body> есть возможность указать цвет фона страницы. Делается это размещением в нем атрибута bgcolor. Например, так:<body bgcolor="Blue">Здесь задан синий цвет для фона этой страницы. В языке HTML предусмотрено некоторое количество цветов, указываемых по названиям - можно, например, атрибуту bgcolor задать цвет DarkViolet или Gold. Но гораздо чаще используют шестнадцатеричные коды цветов. Тогда этот же тег будет записан так:<body bgcolor="#0000FF">То есть, чтобы изменить цвет фона страницы, заданный этим способом, вам надо открыть код страницы, найти в нем тег body и исправить значение атрибута bgcolor. Если вы имеете в своем распоряжении файл этой страницы, то сделать это можно обычным текстовым редактором - Блокнотом. Если же используете какую-либо систему управления сайтом, то можете это делать прямо в онлайн-редакторе страниц панели администрирования вашего сайта.
2
Однако управление цветом фона документов средствами HTML сейчас применяется не часто. Гораздо вероятнее, что на вашем сайте для этого используется CSS (Cascading Style Sheets - «каскадные таблицы стилей»). CSS - это язык, специально предназначенный для описания внешнего вида документа, в отличии от HTML, для которого это лишь одна из второстепенных задач. Блоки CSS могут быть включены полностью в код страницы, а могут содержаться в отдельном файле с расширением, например, styles.css. Во втором случае в коде страницы будет ссылка на внешний файл, которая может выглядеть так:
<style type="text/css" media="all">@import "styles.css"; </style>А в первом случае между тегами <style type="text/css" media="all"> и </style> будет описание стиля документа. И в нем, вам тоже надо будет найти ту часть описания стилей, которая относится к основному телу документа – body. Но в CSS это будет называться не «тегом» а «селектором», и выглядеть должно, например, так:
body {
background-color: Blue;
text-align: center;
color: White;
}
Здесь нас интересует параметр background-color – он определяет цвет фона страницы. В приведенном образце задан синий цвет фона. И в SCC для определения цвета действительны те же правила, что в HTML – есть некоторое количество именованных оттенков цветов (например – FloralWhite), но лучше пользоваться шестнадцатеричными значениями. Например, FloralWhite в шестнадцатеричном написании будет выглядеть как #FFFAF0.
Иногда цвет фона задается в переключателе background:
body {
background: Blue;
text-align: center;
color: White;
}
Или так:
body {
background: Blue url(img/image.jpg) no-repeat;
text-align: center;
color: White;
}
В последнем образце кроме цвета, задано отображать в фоне страницы и картинку image.jpg из папки img.
То есть, чтобы изменить цвет фона страницы, заданный с использованием CSS, вам надо:
А - открыть код страницы, найти в нем тег style и определить находится ли описание стилей страницы в отдельном файле или оно изложено прямо здесь. Если в отдельном файле – надо открыть его.
Б – в коде SCC нужно найти переключатель body, а в нем параметр background или background-color и поменять значение цвета на нужное вам.
Как и HTML-код, код CSS можно редактировать в обычном блокноте или онлайн-редакторе страниц панели администрирования сайта.

Совет 2: Как изменить цвет кнопки

Стандартные кнопки не слишком красивы. Их внешний вид различается в зависимости от браузера и операционной системы. Вписать такую кнопку в существующее оформление страницы непросто. К счастью, существует возможность переопределить параметры кнопки, заданные по умолчанию.
Вам понадобится
  • - текстовый редактор "Блокнот";
  • - графический редактор Paint.
Инструкция
1
Создайте два файла. Один из них с расширением .htm будет содержать разметку документа, назовем его index.htm. Второй, с расширением .css, будет содержать таблицы стилей. Этот файл обозначим как style.css. Запишите в файл index стандартную разметку HTML. В шапке документа подключите файл с таблицами строкой <link href="style.css" rel="stylesheet" type="text/css">.
2
Создайте кнопку с параметрами по умолчанию. Откройте файл с разметкой страницы в текстовом редакторе "Блокнот". В раздел body html-документа запишите строку <input type="submit" value="Кнопка по умолчанию" />. Сохраните файл. Теперь его можно открыть в браузере и оценить результат. Размер кнопки зависит от длинны текстовой строки.
3
Перед тем как менять цвет кнопки, необходимо зафиксировать ее геометрические размеры. Для этого откройте файл style.css в "Блокноте". Запишите в него строку .button{ width:175px; height:55px; }. Сохраните изменения. Откройте файл index.htm. Добавьте к строке, описывающей кнопку, атрибут class. В результате она должна выглядеть таким образом: <input type="submit" сlass="button" value="Кнопка по умолчанию" />;. Сохраните файл, откройте его в броузере. Кнопка увеличилась в размерах.
4
Используя графический редактор Paint, подготовьте растровое изображение фона кнопки. Его размеры должны быть 175х55 пикселей. Измените размеры холста. Для этого захватите курсором мыши правый нижний угол холста. Не отпуская мышь, изменяйте размеры до получения требуемых. Текущий размер холста можно увидеть в строке статуса внизу приложения. Сделайте заливку необходимого цвета. Сохраните изображение в файле button.png.
5
Откройте stile.css в текстовом редакторе. В класс button добавьте строку background: url(button.png);. В результате содержимое файла должно выглядеть таким образом: .button{ width:175px; height:55px; url(button.png);}.
Видео по теме
Обратите внимание
Все созданные файлы должны находиться в одной папке.
Полезный совет
Определить шестнадцатеричный код нужного вам оттенка цвета можно как с помощью программ (например - ColorImpact, Ruler), так и используя интернет-ресурсы.
Источники:
  • Он-лайн конвертер цветовых оттенков в их шестнадцатеричные значения
  • как изменить цвет фона в html
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500