<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

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

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

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Свойство CSS background-image в веб-дизайне

Свойство CSS background-image в веб-дизайне

Каждый знает эту знаменитую фразу: "Театр начинается с вешалки". А с чего начинается веб-сайт? Представьте себе, что у вас много идей в голове, которыми вы хотите поделиться с миром, то есть вы хотите стать блогером. Идеи это хорошо, но сразу встает вопрос: "А как будет выглядеть мой блог, какая цветовая гамма, фон?".

И здесь мы подошли к главному, перефразируем так: "Сайт начинается с фона". Большинство блогеров делают "классические блоги" с белым фоном, но мы пойдем другим путем. Пройти мимо замечательного свойства CSS background-image, мы никак не можем.

А что оно делает? Это свойство CSS background-image вставляет картинку в качестве фона в разные элементы HTML-страницы. Оно не ограничивается только тегом body, а широко применяется в оформлении сайта, например для: div, li, p, table, header, footer.

Рассмотрим пример:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url ("css-background-image-01.jpg");
  background-color: #lightblue;
}
</style>
</head>
<body>
<h1>Дизайн сайта начинается с фона.</h1>
</body>
</html>

Будет корректным прописать цвет у фона – свойство background-color, для подстраховки, если не загрузится картинка. В скобочках url () указать путь до папки с картинками.

Свойство CSS background-image в веб-дизайне

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

Простой вариант, чтобы избавиться от "кафельности", это использовать картинку с большими размерами, не менее 1024 px в ширину,чтобы она заполнила собой весь экран. Тоже будет хорошим решением найти бесшовную текстуру, при размножении которой, рисунок будет как одно целое.

Как сделать фон более привлекательным?

Слава богу у нас для этого есть помощники:

  • no-repeat – запретить повтор
  • repeat-x – повторение рисунка только по горизонтали
  • repeat-y – повторение рисунка только по вертикали

Например:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("css-background-image-gradient.png");
  background-color: #white;
  background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Шапка блога</h1>
<p>Это фоновая текстура с повторением только по горизонтали</p>
</body>
</html>

Свойство CSS background-image в веб-дизайне

Следующий помощник - свойство background-position, позволяет позиционировать фоновую картинку в любом месте экрана. Этот прием широко распространен в современном веб-дизайне. У нас есть картинка, но она не часть контента, а служит лишь как украшение сайта.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("css-background-image-02.jpg");
  background-color: #ebebec;
  background-repeat: no-repeat;
  background-position: right top;
  margin-right: 200px;
}
</style>
</head>
<body>
<h1>Заголовок</h1>
<p>Пример неповторяющегося фона с заданным позиционированием.</p>
<p>Картинка отображается только один раз и находится справа.</p>
<p>Задан отступ от правого края в 200 px во избежании наезда текста на фон.</p>
</body>
</html>

Свойство CSS background-image в веб-дизайне

Если мы хотим, чтобы картинка всегда была видна при прокрутки экрана вниз, надо добавить в код выше свойство - background-attachment: fixed;

В чем разница между img и background-image?

Разница принципиальная, тег img вставляется непосредственно в тело HTML-страницы и отвечает за содержание (иллюстрации, фотографии, аватарки), несет смысловую нагрузку. Очень важно, чтобы картинка была проиндексирована поисковыми системами и попала в поисковую выдачу. Свойства CSS background-image – делают сайт уникальным и красивым, то есть это оформление, которое следует выносить во внешний файл CSS стилей или использовать внутри элемента style.

Конечно, это не значит, что background-image не будет работать, если его поместить в тело HTML-страницы. Но я настоятельно рекомендую все, что касается дизайна выносить в CSS. В результате мы получим чистый HTML-код:

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

Ну вот мы и рассмотрели более-менее все варианты с использованием свойства CSS background-image. Побольше практики друзья! Смело копируйте код и придумывайте свои варианты!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.