Как сделать заливку сайта

Цвет фона в HTML

Давайте начнем с рассмотрения того, как сделать нашу первую HTML- страницу такой, какой мы хотим ее видеть.

В HTML мы можем установить цвет фона, используя относительный атрибут тега body. Итак:

Палитра цвета

В данной таблица цветов вы можете переводить выбранный вами цвет в RGB код (для создания цвета в графическом редакторе) и HEX код (для обозначения цвета в HTML).

Цвет в HTML: Цвет фона

bgcolor означает «цвет фона». Многие цвета доступны с использованием соответствующих ключевых слов на английском языке.

В качестве альтернативы предпочтительнее использовать стиль CSS, так как цвет фона является эстетической особенностью страницы:

Однако не рекомендуется вводить цветовую нотацию, ссылаясь на этот тип синтаксиса, поскольку мы не можем точно знать, какой цветовой оттенок соответствует компьютеру пользователя. Во многих случаях предпочтительнее использовать соответствующую шестнадцатеричную цветовую кодировку, которая позволяет нам — среди прочего — также выбирать нестандартные цветовые тона. С шестнадцатеричной записью наш пример становится:

HTML таблица цветов

Вы можете скачать палитру цветов которая сожержит более 100 цветов с названиями и кодами
Скачать палитру цветов с кодами

Вот таблица с обозначениями некоторых цветов (многие из них также доступны в «темном» и «светлом» вариантах, например: “darkblue”, “lightblue” ):

Кстати цвет фона ячейки в таблице задан вот таким образом

Количество доступных цветов зависит от видеокарты. Сегодня мы переходим от минимального разрешения 256 цветов к разрешению, которое обеспечивает миллионы цветов.

Цвет фона и настройки экрана

Поскольку нет способа узнать, какая видеокарта у пользователя (или как он ее установил), веб-дизайнеры давно ссылаются на «безопасную палитру» из 256 цветов, на которую пользователь, безусловно, способен дисплей. Это называется безопасная веб- палитра.

Однако следует сказать, что подавляющее большинство компьютеров настроено отображать как минимум тысячи цветов, поэтому использование «безопасной веб-палитры» уже не так строго необходимо (это было в первые годы существования Интернета).

Источник

Как сделать фон для сайта

Фон для сайта в Adobe Muse. Как сделать?

Этот видеоурок расскажет Вам о том как сделать фон для сайта в программе Adobe Muse. Как сделать фон во всю ширину сайта, как сделать заливку фона, изменить цвет, фон и размер сайта, как сделать фон резиновым, как сделать фон нестандартной формы для сайта и др.

Фон для сайта. Начало проекта.

В этом видеоуроке мы рассмотрим, как сделать фон для сайта в в программе Adobe Muse. Открываем программу. У меня уже создан проект, сделаны все настройки. Давайте зайдем сразу в режим дизайна и приступим к созданию фона.

Фон для сайта. Заливка в браузере.

Первым делом, мы сможем создать фон для сайта с помощью заливки в браузере. Инструмент “Заливка в браузере” находится у нас в верхней части панели инструментов в программе Adobe Muse. Давайте я выберу какой-нибудь цвет, например, синий, и вы увидите, что мы получили две синие полосы. Таким образом, синим цветом будет заливаться вся область, которая у нас является нерабочей в данной программе.

Фон для сайта. Рабочая область сайта.

Рабочая область, как вы знаете, у нас располагается от 0 до 1020 пикселей. Это мы можем посмотреть в разделе “Страница”, в свойствах страницы. Мы задавали здесь ширину страницы 1020 пикселей. То есть основная часть страницы у нас будет определенного цвета, ее цвет мы можем поменять с помощью заливки. Но если я поставлю зеленый, то теперь наше основное рабочее поле будет залито зеленым, а заливка в браузере останется синей. Если мы сейчас нажмем клавишу “Просмотр”, то мы увидим, что наша рабочая область зеленым фоном идет, а заливка в браузере синим. Я перехожу назад в режим дизайна и сейчас поменяю назад на белый.

Фон для сайта. Заливка фона страницы и браузера.

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

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

Фон для сайта. Графический блок (прямоугольник).

Это делается очень просто. Вы выбираете инструмент “Прямоугольник”, создаете графический блок, как это мы делали в одном из моих предыдущих уроков. Например, вот такой блок. Не важно, каких он будет размеров, может быть меньше. Давайте его заливку коричневым цветом. Таким образом, мы создали в этой области фон коричневого цвета для страницы. Если мы нажмем клавишу “Просмотр”, то увидим, что у нас появился блок, который мы создали. Таким образом, мы можем создать несколько разных фонов для сайта с разными цветами. Можно просто взять скопировать, зажимая клавишу Alt, и поменять цвет, например, на оранжевый.

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

Фон для сайта. На всю ширину браузера.

Следующий момент – это как сделать так, чтобы фон был у нас на всю ширину страницы. Мы просто-напросто растягиваем блок до самых краев и получаем таким образом полосу, которая у нас будет отображаться на всю ширину страницы, независимо от того, какой монитор вы используете. Эта полоса всегда будет выглядеть на ширину всей страницы. Давайте зайдем в режим просмотра и здесь мы увидим, что наш коричневый фон растянулся на всю страницу, зеленый и оранжевый так и остались блоками посередине страницы.

Сделать это так же можно зайдя в меню “Перспектива” и нажав вот на такой значок. Наш фон автоматически при нажатии на этот значок растянется до максимума на 100% и значок поменяется на вот такой. Теперь наш зеленый фон так же будет шириной на всю страницу, независимо от того, какой браузер вы будете использовать и на какой ширине монитора вы будете смотреть ваш сайт.

Я перехожу назад в режим дизайна. Стоит нам хоть только на 1 пиксель отодвинуть фон сайта от рабочей области, как мы увидим, что в режиме просмотра зеленый наш фон так же перестал растягиваться на ширину всей страницы.

Фон для сайта. Настройки размеров.

Для каждого фона мы можем так же, как и для всех, в принципе, блоков задавать скругление и создавать некие такие эффекты. Например, я задам для зеленого фона два скругления по 500 пикселей, и вы видите, что мы можем создать фон, не обязательно прямоугольный, а какой-нибудь другой формы. Например, вот такой. Этот фон у нас так же будет растягиваться на ширину всей страницы, если у нас установлен вот этот значок, либо прямоугольник растянут до максимального размера на 100%. Я нажимаю “Просмотр” и вы видите, что наш вот этот лепесточек зеленый растянулся на всю ширину страницы от крайней точки его.

Фон для сайта. Эффекты фона.

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

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

На этом все. Подписывайтесь на мой канал, оставляйте комментарии внизу под этим видео, ставьте лайки и смотрите мои следующие уроки. Пока.

Источник