<MyRusakov.ru />

Вёрстка сайта с нуля

Вёрстка сайта с нуля

Это уникальная информация по созданию страниц любой сложности. Вы узнаете всё, что нужно по HTML и CSS, а также увидите множество примеров по вёрстке страниц. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены! Пройдя данный курс, Вы сможете верстать страницы с любым по сложности дизайном. Помимо курса, Вы получите Бонус, который расскажет, как заработать на вёрстке сайтов.

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

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

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

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

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

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

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

Веб-дизайн за пять минут

Веб-дизайн за пять минут

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

Что необходимо для этого сделать?

Содержание

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

Написанный контент, как и пункт, который вы сейчас читаете, составляет более 90% веб-страницы. Стилизация этого текстового контента будет иметь большое значение.

Предположим, вы уже доработали контент, который хотите опубликовать, и просто создали пустой файл style.css, каково первое CSS-правило, которое вы можете написать?

Центрирование

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

После стилизации текстовых блоков, как насчет стилизации самого текста?

body
 {
   margin: 0 auto;
   max-width: 50em;
 }

Семейство шрифтов

По умолчанию шрифт браузера имеет значение «Times», которое может выглядеть некрасивым. Переход на шрифт без засечек, таких как «Helvetica» или «Arial», может значительно улучшить внешний вид вашей страницы.

body
 {
   font-family: "Helvetica", "Arial", sans-serif;
 }

Если же вы хотите придерживаться шрифта с засечками, попробуйте «Georgia».

Хотя текст становится более привлекательным, давайте сделаем его более читаемым.

Межстрочный интервал

Когда страница выглядит «сломанной» для пользователя, это обычно проблема с интервалом. Предоставление места внутри контента может увеличить привлекательность страницы.

body
 {
   line-height: 1.5;
   padding: 4em 1em;
 }

 h2
 {
   margin-top: 1em;
   padding-top: 1em;
 }

Давайте применим более тонкие изменения.

Цвет и контраст

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

 body
 {
  color: #555;
 }

И чтобы сохранить нужный уровень контрастности, давайте выберем более темный оттенок для важных слов

 h1,
  h2,
  b {
   color: #333;
  }

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

Баланс

Для исправления баланса страницы требуется несколько дополнительных касаний:

 code,
  pre
{
   background: #eee;
  }

 code
{
   padding: 2px 4px;
   vertical-align: text-bottom;
 }

 pre
{
   padding: 1em;
 }

На этом этапе вам может потребоваться выделить вашу страницу – сделать ее уникальной.

Основной цвет

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

a
{
   color: #e81c4f;
}

Но чтобы сохранить баланс, нам понадобятся дополнительные цвета.

Дополнительные цвета

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

  body
{
   color: #566b78;
  }

 code,
 pre
{
   background: #f5f7f9;
   border-bottom: 1px solid #d8dee9;
   color: #a7adba;
 }

  pre {
   border-left: 2px solid #69c;
  }

Изменив оттенки, почему бы не изменить шрифт ...

Пользовательский шрифт

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

Например, можно использовать «Roboto» из бесплатной службы Google Fonts:

@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';

body
{
   font-family: "Roboto", "Helvetica", "Arial", sans-serif;
 }

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

Улучшим наш заголовок хорошим фоновым изображением.

header
{
   background-color: #263d36;
   background-image: url("header.jpg");
   background-position: center top;
   background-repeat: no-repeat;
   background-size: cover;
   line-height: 1.2;
   padding: 10vw 2em;
   text-align: center;
 }

Добавим логотип

header img
{
   display: inline-block;
   height: 120px;
   vertical-align: top;
   width: 120px;
 
}

Поиграемся со стилями текста.

  header h1  
{
   color: white;
   font-size: 2.5em;
   font-weight: 300;
 }

  header a  
{
   border: 1px solid #e81c4f;
   border-radius: 290486px;
   color: white;
   font-size: 0.6em;
   letter-spacing: 0.2em;
   padding: 1em 2em;
   text-transform: uppercase;
   text-decoration: none;
   transition: none 200ms ease-out;
   transition-property: color, background;
  }

  header a:hover  
{
   background: #e81c4f;
   color: white;
  }

И вуаля!

Мы разработали достойную страницу всего за несколько минут, следуя основным принципам веб-дизайна. Осталось только одно последнее:

Изучить CSS с помощью моего курса Вёрстка сайта с нуля 2.0

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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