Как изменить верстку html

Время прочтения
13 мин

Просмотры 1.2M

Уважаемый читатель, этой статьей я открываю цикл статей, посвященных вёрстке.
В первой части будет описано, как это сделать с помощью стандартных средств на чистом HTML и CSS. В последующих частях рассмотрим как сделать тоже самое, но с помощью современных фреймворков и CMS.

Часть 1. Верстка стандартными средствами

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

Итак, давайте приступим. В качестве нашего подопытного мы возьмем бесплатный psd шаблон Corporate Blue от студии Pcklaboratory.

Структура файлов

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

• Создаем папку с названием нашего проекта, например Whitesquare.
• В ней создаем пустой файл index.html.
• В папке проекта создаем папку css с пустым файлом styles.css.
• В папке проекта создаем пустую папку images.

Предварительный осмотр

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

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

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

Общие изображения

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

Сохраним логотипы следующим образом:
/images/logo.png
/images/footer-logo.png

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

Повторяющиеся фоновые изображения необходимо вырезать минимальным кусочком достаточным для образования полного изображения повторением по вертикали и горизонтали.
/images/bg.png
/images/h1-bg.png

Иконки социальных сетей с одинаковыми размерами удобно сохранить в один файл и использовать как спрайты для более быстрой загрузки. Для этого можно склеить картинки вручную в Photoshop, а можно сначала нарезать по одной, а затем склеить с помощью специально сервиса, например http://ru.spritegen.website-performance.org. В итоге получится два файла:
/images/social.png
/images/social-small.png

Общее правило при именовании изображений заключается в том, что мелкие и простые картинки, такие, как иконки, логотипы и т.д. сохраняются в формате png, а фотографии в формате jpg.

Основные стили

И только теперь можно начинать писать код. Но начнем мы это делать не с привычного HTML, а с переноса правил в CSS.

На данном этапе желательно перенести все визуальные стили из дизайна в CSS, которые будут применяться по умолчанию для каждого тега.

Основной цвет фона примерно соответствует цвету #f8f8f8. Он будет показан в случае, если фоновая картинка не загрузится. Наверху страницы находится серая дизайнерская полоска. Применим ее через свойство border для body.

Основным шрифтом является тот шрифт, которым написан текст в области контента. Чтобы узнать его стили нужно выделить его в Photoshop’е и посмотреть свойства шрифта. В данном случае это Tahoma 12px с цветом #8f8f8f. Так же в этом макете параграфы имеют увеличенные отступы.

Прописываем все эти стили в styles.css:

body {
	color: #8f8f8f;
	font: 12px Tahoma, sans-serif;
	background-color: #f8f8f8;
	border-top: 5px solid #7e7e7e;
	margin: 0;
}
input[type="text"] {
	background-color: #f3f3f3;
	border: 1px solid #e7e7e7;
	height: 30px;
	color: #b2b2b2;
	padding: 0 10px;
	vertical-align: top;
}
button {
	color: #fff;
	background-color: #29c5e6;
	border: none;
	height: 32px;
	font-family: 'Oswald', sans-serif;
}
p {
	margin: 20px 0;
}

В дальнейшем мы все стили будем писать в этот же файл, поэтому будем называть его просто «стили».

Каркас HTML

И вот, наконец, мы можем попрактиковаться в написании HTML кода. Запишем в index.html следующее:

<!doctype html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<title>Whitesquare</title>
	<link rel="stylesheet" href="css/styles.css" type="text/css">
	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,300" type="text/css">

	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>
<body>
</body>
</html>

Здесь мы указываем, что используем разметку HTML5, кодировку utf-8, страница называется Whitesquare. Также подключаем наш файл стилей и внешний файл со стилями шрифтов.
В последнем блоке в секции head мы подключаем специальный скрипт, который позволяет поддерживать Html5 теги в браузерах Internet Explorer меньше 9 версии. Мета-тег X-UA-Compatible сообщает, что в случае использования браузера Internet Explorer, он должен отразить сайт самым современным способом.

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

Макет

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

Опишем это в теге body:

<body>
	<div id="wrapper">
		<header></header>
		<nav></nav>
		<div id="heading"></div>
		<aside></aside>
		<section></section>
	</div>
	<footer></footer>
</body>

Wrapper используется для объединения блоков и их выравнивания по центру страницы.

Затем укажем стили блоков:

#wrapper {
	max-width: 960px;
	margin: auto;
}
header {
	padding: 20px 0;
}

Логотип

Вставляем логотип в тег header:

<header>
	<a href="/"><img src="" alt="Whitesquare logo"></a>
</header>

Дополнительных стилей не требуется.

Поиск

Вставляем форму поиска в тег header:

<header>
…
<form name="search" action="#" method="get">
	<input type="text" name="q" placeholder="Search"><button type="submit">GO</button>
</form>
</header>

И стили выравнивания по правому краю для нее:

form[name="search"] {
	float: right;
}

Меню

Для отображения меню необходимо создать список со ссылками внутри тега nav:

<nav>
	<ul class="top-menu">
		<li><a href="/home/">HOME</a></li>
		<li class="active">ABOUT US</li>
		<li><a href="/services/">SERVICES</a></li>
		<li><a href="/partners/">PARTNERS</a></li>
		<li><a href="/customers/">CUSTOMERS</a></li>
		<li><a href="/projects/">PROJECTS</a></li>
		<li><a href="/careers/">CAREERS</a></li>
		<li><a href="/contact/">CONTACT</a></li>
	</ul>
</nav>

CSS стили для него будут следующие:

nav a {
	text-decoration: none;
}

nav ul {
	margin: 0;
	padding: 0;
}

nav li {
	list-style-position: inside;
	font: 14px 'Oswald', sans-serif;
	padding: 10px;
}

.top-menu li {
	display: inline-block;
	padding: 10px 30px;
	margin: 0;
}

.top-menu li.active {
	background: #29c5e6;
	color: #fff;
}

.top-menu a {
	color: #b2b2b2;
}

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

Заголовок страницы

Заголовок страницы помещается в div с идентификатором heading

<div id="heading">
	<h1>ABOUT US</h1>
</div>

Заголовок имеет следующие стили:

#heading {
	background: transparent url(../images/h1-bg.png);
	margin: 30px 0;
	padding-left: 20px;
}

h1 {
	display: inline-block;
	color: #7e7e7e;
	font: 40px/40px 'Oswald', sans-serif;
	background: url(../images/bg.png);
	margin: 0;
	padding: 0 10px;
}

Рисуем серую полоску фоном на div’e, и в нее вкладываем инлайновый h1 с нужным шрифтом и фоном цвета страницы, чтобы создалось впечатление прозрачного фона для h1.

Колонки

Для того, чтобы создать колонки страницы нужно прописать следующие стили:

aside {
	float: left;
	width: 250px;
}
section {
	margin-left: 280px;
	padding-bottom: 50px;
}

Здесь мы задали фиксированную ширину 250 пикселей для сайдбара, прибили его к левому краю и отодвинули колонку с контентом вправо на 280 пикселей от левого края. Также добавили отступ у контента снизу.

Подменю

Подменю создаем аналогично главному меню. Для этого в теге aside прописываем следующее:

<aside>
<nav>
	<ul class="aside-menu">
		<li class="active">LOREM IPSUM</li>
		<li><a href="/donec/">DONEC TINCIDUNT LAOREET</a></li>
		<li><a href="/vestibulum/">VESTIBULUM ELIT</a></li>
		<li><a href="/etiam/">ETIAM PHARETRA</a></li>
		<li><a href="/phasellus/">PHASELLUS PLACERAT</a></li>
		<li><a href="/cras/">CRAS ET NISI VITAE ODIO</a></li>
	</ul>
</nav>
</aside>

И применяем к подменю следующие стили:

.aside-menu li {
	font-weight: 300;
	list-style-type: square;
	border-top: 1px solid #e7e7e7;
}

.aside-menu li:first-child {
	border: none;
}

.aside-menu li.active {
	color: #29c5e6;
}

.aside-menu a {
	color: #8f8f8f;
}

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

Контент сайдбара

В контенте сайдбара помимо подменю в макете располагается также изображение с расположением офисов.

В html это выглядит так:

<h2>OUR OFFICES</h2>
<p><img src="images/sample.png" width="230" height="180" alt="Our offices"></p>

В стилях укажем шрифты, цвета и отступы:

aside > h2 {
	background: #29c5e6;
	font: 14px 'Oswald', sans-serif;
	color: #fff;
	padding: 10px;
	margin: 30px 0 0 0;
}

aside > p {
	background: #f3f3f3;
	border: 1px solid #e7e7e7;
	padding: 10px;
	margin: 0;
}

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

Цитата

Вёрстку контента начнём с добавления цитаты.

Добавим код цитаты в раздел section

<section>
<blockquote>
	<p>
		“QUISQUE IN ENIM VELIT, AT DIGNISSIM EST. NULLA UL CORPER, DOLOR AC PELLENTESQUE PLACERAT, JUSTO TELLUS GRAVIDA ERAT, VEL PORTTITOR LIBERO ERAT.”
	</p>
	<cite>John Doe, Lorem Ipsum</cite>
	</blockquote>
</section>

И применим для него стили:

blockquote {
	margin: 0;
	background: #29c5e6;
	padding: 10px 20px;
	font-family: 'Oswald', sans-serif;
	font-weight: 300;
}

blockquote p {
	color: #fff;
	font-style: italic;
	font-size: 33px;
	margin: 0;
}

blockquote cite {
	display: block;
	font-size: 20px;
	font-style: normal;
	color: #1d8ea6;
	margin: 0;
	text-align: right;
}

Здесь нет ничего нового, так же — шрифты, фоны и отступы.

Контент

Все стили для текста контента мы уже добавили. Поэтому остается добавить только три параграфа с самим текстом после

.



<p>Lorem ipsum dolor sit amet…</p>
<p>Donec vel nisl nibh…</p>
<p>Donec vel nisl nibh…</p>

<figure>
	<img src="images/sample.png" width="320" height="175" alt="">
</figure>
<figure>
	<img src="images/sample.png" width="320" height="175" alt="">
</figure>

figure {
	display: inline-block;
	margin: 0;
	font-family: 'Oswald', sans-serif;
	font-weight: 300;
}

figure img {
	display: block;
	border: 1px solid #fff;
	outline: 1px solid #c9c9c9;
}

figure figcaption {
	font-size: 16px;
	font-weight: 300;
	margin-top: 5px;
}

figure figcaption span {
	display: block;
	font-size: 14px;
	color: #29c5e6;
}
section > figure + figure {
	margin-left: 28px;
}

<h2>OUR TEAM</h2>

section > h2 {
	background: #29c5e6;
	font: 30px 'Oswald', sans-serif;
	font-weight: 300;
	color: #fff;
	padding: 0 10px;
	margin: 30px 0 0 0;
}

<div class="team-row">
	<figure>
		<img src="images/sample.png" width="96" height="96" alt="">
		<figcaption>John Doe<span>ceo</span></figcaption>
	</figure>
	<figure>
		<img src="images/sample.png" width="96" height="96" alt="">
		<figcaption>Saundra Pittsley<span>team leader</span></figcaption>
	</figure>
…
</div>
<div class="team-row">
	<figure>
		<img src="images/sample.png" width="96" height="96" alt="">
		<figcaption>Ericka Nobriga<span>art director</span></figcaption>
	</figure>
	<figure>
		<img src="images/sample.png" width="96" height="96" alt="">
		<figcaption>Cody Rousselle<span>senior ui designer</span></figcaption>
	</figure>
…
</div>

figure figcaption {
	font-size: 16px;
	font-weight: 300;
	margin-top: 5px;
}

figure div {
	font-size: 14px;
	color: #29c5e6;
}

.team-row figure {
	margin-top: 20px;
}

.team-row figure + figure {
	margin-left: 43px;
}

<footer>
	<div id="footer">
		<div id="twitter"></div> 
		<div id="sitemap"></div>
		<div id="social"></div>
		<div id="footer-logo"></div>
	</div>
</footer>

footer {
	background: #7e7e7e;
	color: #dbdbdb;
	font-size: 11px;
}

#footer {
	max-width: 960px;
	margin: auto;
	padding: 10px 0;
	height: 90px;
}

<div id="twitter">
	<h3>TWITTER FEED</h3>
	<time datetime="2012-10-23"><a href="#">23 oct</a></time>
<p>
	In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug
</p>
</div>

footer h3 {
	font: 14px 'Oswald', sans-serif;
	color: #fff;
	border-bottom: 1px solid #919191;
	margin: 0 0 10px 0;
}

#twitter time a {
	color: #b4aeae;
}

footer p {
	margin: 5px 0;
}

#twitter {
	float: left;
	width: 300px;
}

#twitter p {
	padding-right: 15px;
}

<div id="sitemap">
	<h3>SITEMAP</h3>
	<div>
		<a href="/home/">Home</a>
		<a href="/about/">About</a>
		<a href="/services/">Services</a>
	</div>
	<div>
		<a href="/partners/">Partners</a>
		<a href="/customers/">Support</a>
		<a href="/contact/">Contact</a>
	</div>
</div>

footer a {
	color: #dbdbdb;
}

#sitemap {
	width: 150px;
	float: left;
	margin-left: 20px;
	padding-right: 15px;
}

#sitemap div {
	display: inline-block;
}

#sitemap div + div {
	margin-left: 40px;
}

#sitemap a {
	display: block;
	text-decoration: none;
	font-size: 12px;
	margin-bottom: 5px;
}

#sitemap a:hover {
	text-decoration: underline;
}

<div id="social">
	<h3>SOCIAL NETWORKS</h3>
	<a href="http://twitter.com/" class="social-icon twitter"></a>
	<a href="http://facebook.com/" class="social-icon facebook"></a>
	<a href="http://plus.google.com/" class="social-icon google-plus"></a>
	<a href="http://vimeo.com/" class="social-icon-small vimeo"></a>
	<a href="http://youtube.com/" class="social-icon-small youtube"></a>
	<a href="http://flickr.com/" class="social-icon-small flickr"></a>
	<a href="http://instagram.com/" class="social-icon-small instagram"></a>
	<a href="/rss/" class="social-icon-small rss"></a>
</div>

#social {
	float: left;
	margin-left: 20px;
	width: 130px;
}

.social-icon {
	width: 30px;
	height: 30px;
	background: url(../images/social.png) no-repeat;
	display: inline-block;
	margin-right: 10px;
}

.social-icon-small  {
	width: 16px;
	height: 16px;
	background: url(../images/social-small.png) no-repeat;
	display: inline-block;
	margin: 5px 6px 0 0;
}

.twitter {
	background-position: 0 0;
}

.facebook {
	background-position: -30px 0;
}

.google-plus {
	background-position: -60px 0;
}

.vimeo {
	background-position: 0 0;
}

.youtube {
	background-position: -16px 0;
}

.flickr {
	background-position: -32px 0;
}

.instagram {
	background-position: -48px 0;
}

.rss {
	background-position: -64px 0;
}

<div id="footer-logo">
	<a href="/"><img src="" alt="Whitesquare logo"></a>
	<p>Copyright © 2012 Whitesquare. A <a href="http://pcklab.com">pcklab</a> creation</p>
</div>

#footer-logo {
	float: right;
	margin-top: 20px;
	font-size: 10px;
	text-align: right;
}

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

Осмотрите макет

Зачем. Чтобы потом не отвлекаться от вёрстки.

Смотрите макет по принципу «Снаружи — внутрь» — двигаясь от крупных смысловых элементов к деталям дизайна. Чтобы было удобнее, сделайте дубликат макета в Фигме и пишите там заметки о том, что нашли.

Отметьте крупные смысловые блоки и разделы. Посмотрите на страницу и выделите крупные смысловые блоки. Базовая структура любого макета состоит из трех основных тегов:

• <header> — шапка сайта, одинаковая на всех страницах.
• <main> — уникальный контент;
• <footer> — подвал, одинаковый на всех страницах.

Теперь ищем смысловые разделы внутри этих блоков. Поможет схема:

Проанализируйте контент. Присмотритесь к тексту на макете, какую функцию он выполняет? Может быть то, что вы видите, это не текст, а кнопка или раскрывающиеся меню?

На этом этапе отметьте:

1. Заголовок всего документа и заголовки смысловых разделов. Теги: <h1>-<h6>.
2. Мелкие элементы в смысловых разделах. Это списки, таблицы, демо-материалы, параграфы и переносы, формы, цитаты, контактная информация и прогресс.
3. Фразовые элементы. Изображения, ссылки, кнопки, видео, время и мелкие текстовые элементы.

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

Настройте редактор кода и проект

Установите редактор Visual Studio Code (или любой другой), если ещё этого не сделали, и плагин editorconfig. Он помогает разным разработчикам писать код в проекте в одном стиле.

Структура проекта. Создайте папку и положите туда файл index. html, папку css с файлами style. css и normalize. css, а также папки для картинок и шрифтов. Получится так:

Разметка

Рабочую среду подготовили, приступаем к разметке.

1. Создаем разметку страницы в файле index. html. Изображения пока не подключаем — этим займемся на этапе работы с графикой;
2. Далее, в файле при помощи нужных тегов: прописываете весь текст, расставляете все ссылки и кнопки. Нужен только HTML-код, стили пока делать не нужно.
3. Теперь определим !DOCTYPE, укажем язык содержимого, кодировку и заголовок страницы во вкладке браузера.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Заголовок страницы</title>
  </head>
  <body>
  </body>
</html>

Выделяем крупные смысловые блоки на каждой странице сайта. Это <header> — шапка, <footer> — подвал и <main> — основное содержимое.

Размечаем в блоках крупные смысловые разделы. Выделяем главную навигацию <nav>, секции через <section>, смысловые разделы через <article> и дополнительное содержимое через <nav>.

Выделяем заголовок всего документа и заголовки смысловых разделов. Заголовок — это обманчиво простой тег. Главная проблема с заголовками такая: не всегда то, что кажется заголовком, им является.

Например, текст про дизайн-студию из Краснодара прикидывается заголовком, но на самом деле это не он:

Это само содержание, а не его резюме. Хорошим заголовком для этого блока был бы текст «О нас» или «О студии».

Размечаем мелкие элементы в смысловых разделах. Списки <ul> и <ol>, таблицы <table>, демонстрационные материалы <figure>, параграфы <p> и переносы <br>, формы <form>, цитаты <blockquote>, контактную информацию, прогресс и измерения.

Определить, какие теги использовать, можно методом исключения:

• Получилось найти самый подходящий смысловой тег — использовать его.
• Для потоковых контейнеров — <div>.
• Для мелких фразовых элементов (слово или фраза) — <span>.

Размечаем фразовые элементы. Изображения <img>, ссылки <a>, кнопки <button>, видео-контент <video>, время <time>, мелкие текстовые элементы <span>, <b> или <i>.

Разметка в редакторе кода выглядит так:

А так проект выглядит в браузере:

Базовая стилизация

Начинается самое интересное — работа с внешним видом. Прописываем в style.css базовые стили. Для крупных блоков пока ничего не делаем.

Этапы базовой стилизации

• Добавление классов в разметку;
• Подключение нестандартных шрифтов (локально или из сервиса);
• Подключение normalize. css (по желанию);
• Указываем параметры шрифта — название, размер, цвет, жирность;
• Указываем высоту строки;
• Описание фоновых параметров (фоновый цвет);
• Описание состояний интерактивных элементов, которые описаны в стайлгайде. На этом этапе задавайте только текстовые параметры и параметры фона;
• Все цвета вынесены в кастомные свойства в селектор :root.

Пример проекта с базовой стилизацией:

Работа с графикой

Экспортируйте всю графику из макета в Figma и подключите её в разметке.

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

В папке вашего проекта подготовьте графику: подготовленные изображения разместите в подпапке img в папке проекта, чтобы у вас получилась примерно такая структура проекта:

project
| – css
| – fonts
| – img
|      [ваши картинки]
|   favicon.ico
|   index.html
|   catalog.html

Подключите контентные изображения в разметке. Фоновые и декоративные изображения пока подключать не нужно.

При подключении изображений используйте относительные адреса, обязательно укажите размер картинки без пикселей, а также alt. Например, так:

<img src="img/logo.png" width="100" height="50" alt="Девайс">

Подключите к проекту фавиконки. favicon. ico размером 32×32 положите в корень проекта и подключите в <head>, остальные версии фавиконок делать не обязательно.

Пример проекта в котором подключена графика:

Построение сетки

Построение сеток производится в общем стилевом файле style. css.

При работе с созданием крупных структурных сеток, в вёрстке используется подход desktop-first, то есть сайт прежде всего должен корректно отображаться на больших разрешениях экрана.

Расположите элементы страницы по сетке в соответствии с макетом. Для удобства используйте один из следующих способов визуального выделения элементов:

1. C помощью свойства background-color c разными цветами для разных блоков;
2. С помощью свойства outline (для удобства также можно использовать разные цвета).
3. Свойство border лучше не использовать, так как оно влияет на ширину блока и может что-нибудь сломать.

Пример проекта, где уже добавлены сетки:

Добавление декоративных элементов

На этом этапе добавляем мелкие сетки — например, для карточек товара. Подключаем кастомные шрифты и фоновые изображения. В конце оформляем остальные декоративные элементы, которые ещё не стилизовали раньше.

Пример готового проекта, где добавлены декоративные элементы:

Всё почти готово, осталась пара шагов.

Адаптивные сетки и декоративные элементы

Чтобы сделать хороший адаптивный сайт, нужно понимать много нюансов: как работают вьюпорт, медиавыражения, адаптивные картинки. Эту тему стоит разобрать отдельно, но если хотите, познакомьтесь с ней в блоге Академии.

Адаптивная графика

Ура! Мы и дошли до последнего пункта работы над проектом. Что нам осталось сделать?

1. Подключаем в разметке и стилях адаптивные изображения для разных девайсов и экранов с разной плотностью пикселей;
2. В HTML используем элемент picture, с помощью которого подключаем картинки для разных разрешений экрана, для экранов с разной плотностью пикселей, а также webp-варианты картинок для поддерживающих браузеров;
3. В CSS подключаем картинки для экранов с двухкратной плотностью пикселей и для разных разрешений с помощью медиа-выражений.

Пример готового проекта, где настроена адаптивная графика:

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

Следующие шаги:

• Шаблон простого сайта на HTML
• Шаблон HTML-формы
• Основы дизайна для верстальщиков

Оглавление

• 1. Написание HTML кода
• 2. Изменяем цвета
• 3. Изменяем шрифты
• 4. Добавляем навигацию
• 5. Украшаем ссылки
• 6. Добавляем горизонтальные линии
• 7. Подключаем внешний CSS
• Дальнейшее изучение

Полученная HTML страница с цветами и разметкой сделанной при
помощи CSS.

ШАГ 1: написание HTML кода

Для этой статьи я предлагаю использовать простейшие утилиты,
например Блокнот от Windows, TextEdit на Mac или KEdit под KDE
вполне подойдут под задачу. Как только Вы поймете основные
принципы, вы можете переключиться на использование более
продвинутых инструментов разработки, например на такие коммерческие
программы как Style Master или DreamWeaver. Но для создания первого
CSS файла не стоит отвлекаться на множество расширенных
возможностей.

Не используйте текстовый редактор наподобие Microsoft Word или
OpenOffice. Эти программы обычно создают файлы, которые не могут
быть прочитаны браузерами. Для HTML и CSS файлов нам нужны обычные
текстовые файлы без какого-либо формата.

Первый шаг заключается в открытии пустого окна текстового
редактора (Notepad, TextEdit, KEdit или любого Вашего любимого) и
наборе в нем следующего текста:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
</head>

<body>

<!-- Site navigation menu -->
<ul class="navbar">
  <li><a href="index.html">Home page</a>
  <li><a href="musings.html">Musings</a>
  <li><a href="town.html">My town</a>
  <li><a href="links.html">Links</a>
</ul>

<!-- Main content -->
<h1>My first styled page</h1>

<p>Welcome to my styled page!

<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere&hellip;

<p>There should be more here, but I don't know
what yet.

<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
  by myself.</address>

</body>
</html>

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

(Если вы используете TextEdit на Макинтоше, не забудьте указать
TextEdit’у, что это действительно простой текстовый файл, открыв
меню Format и выбрав опцию “Make plain text”.)

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

Выберите “Сохранить как…” или “Save As…” из выпадающего меню
Файл или File, укажите каталог для сохранения файла (например
Рабочий Стол) и сохраните данный файл как “mypage.html”. Не
закрывайте редактор, он нам еще потребуется.

(Если вы используете TextEdit для Mac OS X версии меньше чем
10.4, вы увидите опцию «Don’t append the .txt extension» в
диалоговом окне «Save as». Выберите эту опцию, потому что имя файла
“mypage.html” уже включает в себя расширение. Более новые версии
TextEdit заметят .html расширение автоматически.)

Далее, откройте файл в браузере. Вы можете сделать это следующим
образом: найдите файл вашим файловым менеджером (Проводник, Windows
Explorer, Finder or Konqueror) и щелкните (единожды или дважды) на
нем. Если вы делали все как описано то имя файла будет
“mypage.html”. У вас должен открыться файл в браузере,
установленном по умолчанию. (Если нет, то откройте браузер и
перетащите файл в его окно.)

Как Вы видите, страница выглядит достаточно скучно…

ШАГ 2: изменяем цвета

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

Мы начнем со стилей, встроенных в HTML файл. Позже, мы положим
CSS стили и HTML разметку в разные файлы. Раздельное хранение
хорошо тем, что легче использовать те же самые стили для множества
HTML файлов: Вам нужно написать CSS стили только один раз. Но на
этом шаге мы оставим все в одном файле.

Нам нужно добавить элемент <style> к HTML файлу.
Определения стилей будут внутри этого тэга. Возвращаемся к
редактору и добавляем следующие пять строчек в заголовок HTML кода
между тэгами <head> и </head>. Строки, которые надо
добавить выделены красным (с 5-й по 9-ю).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>
[и т.д.]

Первая строка говорит браузеру о том, что это таблица стилей и
что она написана на CSS (“text/css”). Вторая строка говорит, что мы
применяем стиль к элементу “body”. Третья устанавливает цвет текста
в пурпурный, а следующая устанавливает цвет фона в желто-зеленый
оттенок.

body { color: purple }
body { background-color: #d8da3d }

Фон элемента body так же является фоном целого документа. Мы
явно не назначили другим элементам (p, li, address…) фона, так что
по умолчанию у них его нет (или он прозрачный). Свойство ‘color’
устанавливает цвет текста элемента body, но все остальные элементы
внутри body наследуют этот цвет, пока для них не задан другой в
виде другого правила. (Мы добавим другие цвета позже.)

Теперь сохраните этот файл (используйте команду “Сохранить” или
“Save” из файлового меню) и переключитесь обратно в браузер. Если
вы нажмете кнопку “обновить” , то изображение сменится со “скучной”
страницы на разукрашенную (но все еще однообразную) страницу. Кроме
ссылок сверху, весь текст должен быть пурпурный на желто-зеленом
фоне.

В CSS
можно задавать цвета несколькими способами. Наш пример показывает
два из них: по имени (“purple”) и по шестнадцатиричному коду
(“#d8da3d”). Существует порядка 140 имен цветов и 16
шестнадцатиричных значений. Добавляя прикосновение стиля
объясняет детали относительно этих кодов.

ШАГ 3: изменяем шрифты

Еще одна вещь которую можно сделать — шрифтовое разнообразие
разных элементов на странице. Давайте напишем шрифтом “Georgia”
весь текст, исключая заголовки, которые мы напишем “Helvetica.”

Поскольку в Web никогда нельзя быть целиком уверенным в том,
какие шрифты установлены на компьютерах посетителей, мы добавим
альтернативные способы отображения: если Georgia не найдена, то мы
будем использовать Times New Roman или Times, а если и он не
найден, то браузер может взять любой шрифт с засечками. Если отсутствует Helvetica, то мы
можем попробовать использовать Geneva, Arial или SunSans-Regular
поскольку они очень похожи по начертанию, ну а если у пользователя
нет таких шрифтов, то браузер может выбрать любой другой шрифт без
засечек.

В текстовом редакторе добавьте следующие строки (строки 7-8 и 11-13):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[и т.д.]

Если вы сохраните файл снова и нажмете “обновить” в браузере, то
у вас должны быть разные шрифты в заголовках и в тексте.

ШАГ 4: добавляем навигацию

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

Навигация уже на странице. Это список <ul> вверху. Ссылки
в нем не работают, потому что наш “сайт” пока что состоит только из
одной страницы, но это неважно в данный момент. Конечно же, на
настоящем сайте не должно быть неработающих ссылок.

Нам нужно переместить список налево и сдвинуть остальное
содержимое немного вправо, чтобы создать пространство для него.
Свойства CSS которые мы будем использовать для этого —
‘padding-left’ (для сдвига текста) и ‘position’, ‘left’ и ‘top’
(для сдвига меню).

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

В окне редактора добавьте следующие строки к HTML файлу (строки 7 и 12-16):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[и т.д.]

Если вы снова сохраните файл и обновите его в браузере то список
ссылок получится у вас слева от основного текста. Это уже смотрится
интереснее, не так ли?

ШАГ 5: украшаем ссылки

Навигационое меню все еще по-прежнему выглядит как список,
вместо меню. Давайте стилизуем его. Мы уберем маркеры списков и
переместим элементы налево, где были маркеры. Так же мы нарисуем
каждый элемент списка на белом фоне в своем черном квадрате (зачем?
просто так, потому что можем).

Мы так же не сказали какими должны быть цвета ссылок, так что
давайте добавим и это свойство: синими будут ссылки которые
пользователь еще не смотрел, пурпурными — те которые он уже
посещал. (строки 13-15 и 23-33):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  </style>
</head>

<body>
[etc.]

ШАГ 6: добавляем горизонтальные линии

Последним добавлением к нашей таблице стилей станет
горизонтальная полоса для разделения текста и подписи снизу. Мы
используем свойство ‘border-top’ для того чтобы добавить
прерывистую линию над элементом <address>
(строки 34-37):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
  </style>
</head>

<body>
[и т.д.]

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

ШАГ 7: внешний CSS

Сейчас у нас есть HTML файл со встроенной таблицей стилей. Но
если наш сайт будет разрастаться, возможно, нам потребуется
множество страниц, использующих один и тот же стиль оформления.
Есть метод получше, чем вставка таблицы в каждую страницу — мы
можем вынести стили в отдельный файл, на который будут указывать
все страницы.

Для создания отдельного файла таблицы стилей нам нужен другой
пустой текстовый документ. Вы можете выбрать пункт “Новый” из меню
«Файл» в редакторе , для создания пустого файла. (Если вы
используете TextEdit, не забудьте сделать его текстовым снова,
используя меню Format.)

Затем вырежьте и вставьте все содержимое внутри <style> из
HTML в это новое окно. Не копируйте элементы разметки <style>
и </style>. Они принадлежат HTML коду, а не CSS. В новом окне
у вас теперь должен быть полная таблица стилей:

body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }

Выберите “Сохранить как…” из меню «Файл», убедитесь что вы в той
же директории/папке что и файл mypage.html, и сохраните таблицу
стилей под именем “mystyle.css”.

Теперь вернитесь к HTML коду. Уберите все содержимое от
<style> до </style> включительно и замените убранное
элементом <link> как показано (строка
5):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <link rel="stylesheet" href="mystyle.css">
</head>

<body>
[etc.]

Такая конструкция скажет браузеру о том, что таблица стиле
располагается в файле под названием “mystyle.css”, и поскольку
директория не упомянута, браузер будет искать этот файл там же, где
лижит HTML файл.

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

Следующий шаг — положить оба файла mypage.html и mystyle.css на
ваш сайт. (Конечно, вы можете захотеть слегка изменить их сперва…)
Как положить файлы на сайт зависит от вашего интернет провайдера.

Разработка сайта – это долгая и плодотворная работа, которая, как правило, разделена на несколько этапов. Начальный этап заключается в прототипировании, когда прорисовывается основная структура сайта. На основе этого разрабатывается макет будущих страниц, который в последующем верстается. Верстка сайта – это преобразование готового макета в продукт, состоящий из языка разметки HTML и CSS.

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

Что включает в себя верстка сайта

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

Выделяется два типа разработчиков сайтов:

• Backend– занимается разработкой внутренней части сайта, программирует основной функционал;
• Frontend – занимается внешней частью сайта, настраивает отображение всех элементов, добавляет к ним анимацию и так далее.

Верстка – это про Frontend, в основу которого входит язык разметки HTML, базис любого сайта.

HTML позволяет показывать страницы и контент, размещенный на них, в заданном порядке. Работа с языком разметки заключается в описании тегов. Вот основные из них:

1. <html> </html> – главный тег, в котором содержатся другие теги;
2. <head> </head> – включает в себя различные SEO-элементы, код JavaScript и многое другое;
3. <body> </body> – внутри этих тегов находится все содержимое страницы;
4. <h1> </h1> – используется для обозначения заголовка первого уровня;
5. <h2> </h2> – используется для обозначения заголовка второго уровня, после которого следуют заголовки h3, h4, h5, h6;
6. <p> </p> – здесь прописывается текстовое описание, например заголовок статьи;
7. <strong> </strong> – придает тексту жирность;
8. <i> </i> – текст, написанный внутри этого тега, отрображается курсивом;
9. <ul> </ul> – обозначает маркированный список;
10. <ol> </ol> – обозначает нумерованный список;
11. <li> </li> – указывает на пункты внутри списка;
12. <a> </a> – позволяет добавить к тексту ссылку на другую страницу, номер телефона, почту или иной элемент с помощью атрибута href;
13. <img> – используется, чтобы добавить картинку на сайт с компьютера либо из интернета;
14. <table> </table> — тег для создания таблицы.

Теги работают следующим образом:

<h1>Привет – это мой первый сайт!</h1>

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

Аналогичным образом прописываются другие теги, в результате чего получается готовый сайт.

Виды верстки

Существует два вида верстки – блочная и табличная.

Табличная верстка

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

Минус такого подхода состоял в том, что приходилось создавать дополнительные таблицы, которые впоследствии могли остаться пустыми. Например, если требовалось разместить изображение и зафиксировать его положение, то необходимо было создать новую строку и разделить ее на несколько столбцов. Только один из них бы содержал изображение, а другие служили бы для него фиксаторами.

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

Как таковая табличная верстка сейчас не используется, но без нее не обходятся при верстке электронных писем – там она, можно сказать, обязательна. Сама верстка разрабатывается с помощью тега <table>, который задает основные параметры таблицы – длину, ширину и прочее. Внутри тега располагаются теги <tr> и <td>, где первый необходим для создания строки, а второй – для столбца.

Блочная верстка

Самый актуальный вид верстки сайтов – блочный. Он основан на теге <div>, с помощью которого создаются контейнеры, включающие в себя весь контент страницы или отдельного блока. Например, мы можем разделить сайт на несколько блоков: первый экран, о компании, контакты – для каждого блока будет отведен свой тег <div>.

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

<div>

            <h1>Привет – это мой первый сайт!</h1>

            <p>Сегодня 2021 год и я сделал свой первый сайт...</p>

            <img src="C:UsersyaDesktop8ftyrtes-960.jpg" alt="">

</div>

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

Например, у нас есть тег h1, и мы хотим сделать его красным – для этого в стилях прописывается следующий код:

h1{

color: red;

}

Заголовок нашей страницы примет следующий вид:

HTML и CSS обычно хранят в разных файлах – такой подход позволяет быстро вносить изменения и не путаться в больших проектах.

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

Вот так выглядит типичная схема блочной верстки:

Валидная верстка

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

При валидной верстке элементы HTML-кода должны находиться строго на своих местах, в начале обязательно прописывается тег <!Doctype html>, а также <html>, <head>, <body>.

Когда верстка считается правильной

Существует множество правил, которых следует придерживаться во время верстки. Нарушение некоторых из них может привести к плохой оптимизации сайта.

• Рекомендуется разбивать HTML-код, CSS-стили и JavaScript-код на разные файлы.
• Весь написанный код должен быть чистым и легко читаемым.
• Верстка макета сайта чаще всего должна быть пиксель в пиксель, но в некоторых случаях допускаются погрешности, согласованные с заказчиком.
• Для оптимизации кода рекомендуется использовать методологию БЭМ от Яндекса.
• Сайт должен работать одинаково во всех браузерах.
• Используйте заголовки H1-H6, а также знайте, что H1 – единственный заголовок на одной странице. Важно соблюдать это правило, иначе могут появиться проблемы с поисковыми системами.
• Также для поисковиков важно, чтобы были заполнены атрибуты <title>, <alt> и <description>.
• Не используйте «тяжелые» изображения, чтобы избежать длительной загрузки сайта.
• Сайт должен быть адаптирован для мобильных устройств. 

Естественно, что это не все основы «идеальной» верстки, но соблюдение даже этих правил позволит создать быстрый и устойчивый сайт.

Инструменты для верстки сайта

Верстальщик – это не простой разработчик, который работает с блокнотом и пишет в нем теги да атрибуты. 

Если говорить об инструментах разработчика, то чаще всего используются:

• Notepad++ – простой редактор кода;
• SublimeText – наиболее используемый редактор;
• Webstorm – самый мощный редактор.

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

Как проверить верстку

После того как сайт будет сверстан, потребуется проверить его работоспособность. Базовое тестирование включает в себя проверку адаптивности на всех устройствах.

Более обширную информацию можно получить на сервисах Jigsaw.W3 и Validator.W3.

Если требуется узнать, соответствует ли верстка макету пиксель в пиксель, то для этого подойдет сервис WellDoneCode.

Сервис Page Ruler нужен как линейка, чтобы в пикселях измерить сверстанные блоки и прочие элементы страниц.

Window Resizer – расширение для Google Chrome, позволяющее узнать, насколько хорошо страница адаптирована под разные устройства.

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

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

Давайте приступим.

Что такое HTML?

Говоря технически, ответ на этот вопрос «язык гипертекстовой разметки (Hyper Text Markup Language)». Однако, для кастомизации шаблона, нам достаточно знать, что HTML это набор открывающих и закрывающих тегов, к примеру:

Теги обозначаются символами < и > и закрывающий тег всегда имеет /. Между тегами находится наш контент:

1

<h1>John Smith, Front End Developer</h1>

Хотя иногда, мы можем увидеть одиночный элемент, у которого нет закрывающего тега, к примеру:

Разные HTML теги отображают различные типы контента на веб-странице по разному. Пример сверху, <h1></h1> создаст крупный заголовок с содержанием «John Smith, Front End Developer», в то время как пример <img> тега создаст изображение файла «mypic.jgp», которые затем появятся на вашей странице.

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

Установите текстовый редактор

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

Я рекомендую Sublime Text, который вы можете скачать по ссылке: https://www.sublimetext.com/3

Скачайте и посмотрите как выглядит ваш HTML шаблон

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

Большинство HTML шаблонов распространяются в качестве ZIP архива — если так, распакуйте его. После чего откройте директорию шаблона и найдите файл под названием «index.html» или «index.htm» .

В примере моего CV шаблона файл «index.html» находится в директории «01 html-website».

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

Установите какие части шаблона вы хотите изменить

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

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

В случае нашего CV шаблона мы хотим изменить:

• Имя
• Профессию 
• Фотографию
• Ссылки соцсетей
• Контактную информацию
• Секции CV: «Профиль», «Опыт работы», «Технические навыки» и «Образование»
• Копирайт

Теперь когда у нас есть список того, что нам предстоит изменить, мы можем начать поиск соответствующих HTML тегов в нашем коде. Давайте начнём с имени.

Найдите необходимый тег в веб-инспекторе

Нажмите правой кнопкой мыши по имени, по умолчанию «Jhon Smith» и выберите Инспектировать (Inspect):

Панель, которая выглядит следующим образом, откроется в вашем браузере:

Данная панель предоставляет вам интерактивный способ изучить код. Наведите мышь на строчку <h1>...</h1> (заголовок первого уровня) и вы должны увидеть выделенное название секции шаблона, как показано на скриншоте.

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

Теперь разверните h1, нажав на маленький треугольник слева и вы увидите контент между тегами, то есть John Smith <small>Front End Developer</small>.

Данный текст соответствует заголовку, который вы видите на экране, тем самым мы нашли нужную часть.

Отредактируйте тег в HTML

Пришло время открыть HTML файл и отредактировать его. Откройте «index.html» файл в Sublime Text и вы увидите следующую картину:

Теперь нужно найти код, который соответствует тому, что мы видели в Chrome инспекторе. Опуститесь на строку 61 — 61.

Теперь можно изменить контент между тегов, чтобы поменялось имя и профессия, на ту которую мы хотим. Для начала отредактируйте «Jhon Smith» и добавьте собственное имя:

Теперь между тегами <small></small> измените «Front End Developer» на вашу профессию.

Сохраните файл и обновите страницу в Chrome. Вы должны увидеть соответствующие изменения.

Повторите, чтобы отредактировать другой контент

Теперь вы понимаете основной процесс:

1. Инспектируем контент, который следует изменить
2. Находим необходимые теги
3. Находим эти теги в HTML файле
4. Редактируем код

Давайте повторим этот процесс, чтобы кастомизировать остальной контент.

Добавляем собственное фото

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

1

<img src="_content/140x140.png" alt="">

Обратите внимание, что в окне инспектора данная строка находится сразу над той строчкой, которую мы редактировали до этого:

Откройте HTML файл и перейдите на строку 59:

Для этого тега нам следует изменить значение атрибута src, который находится в теге img. Сделать это можно изменив содержание между кавычек. После чего туда нужно написать путь к вашему изображению.

Найдите фотографию себя, которая вам понравиться, размерами 150px на 150px (не обращайте внимание что в названии файла указано 140×140.png, в действительности размер 150×150).

Поместите изображение в директорию «_content», в директорию где находится файл «index.html».

Теперь, в HTML файле, измените значение атрибута src, замените «140×140.png» на имя файла, который вы только что добавили в «_content» директорию. Убедитесь, что вы правильно указали расширение файла, оно должно соответствовать вашему файлу «png» / «jpg».

Сохраните ваш файл, обновите Chrome и вы должны увидеть новое изображение:

Измените ссылки соцсетей

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

Вернитесь в Sublime Text, нажмите CTRL + F и найдите «facebook-icon». Нужный нам текст находится на 75 строке.

Тег a на строке 75 не что иное как ссылка для этой иконки и атрибут href, который вы увидите внутри, куда эта ссылка ведёт. Вам следует изменить значение href атрибута на адрес вашей Facebook страницы (к примеру: https://www.facebook.com/mylink)

Замените #, символ, который находится там по умолчанию, на ваш адрес. После чего сделайте тоже самое для Twitter на строке 79, для Google+ на строке 83 и Linkedin на строке 87.

Ели вы хотите убрать какую-нибудь из иконок, выделите открывающий тег <a>, затем содержание ссылки между тегами и закрывающий тег </a> и удалите весь этот код.

Сохраните и обновите ваш сайт, теперь если нажать на ссылку вы перейдёте по соответствующему адресу.

Отредактируйте контактную информацию

Пришло время изменить контактную информацию под иконками соцсетей.

Начните инспектировать слово «Email», чтобы найти где данная информация находится в коде. Обратите внимание на строку, которая подсвечена, нам нужна соответствующая строка в нашем HTML файле.

В Sublime Text, снова нажмите CTRL + F и найдите «Email». Вам необходимо отыскать слово «Email», которое окружено кодом, который мы видели в инспекторе.

Вы найдете интересующее нас место на строке 94. Выделите емейл, который стоит по умолчанию «jhon@sitename.com» в двух местах на этой строке:

После чего замените на свой собственный емейл адрес. На следующей строке замените номер телефона на свой и на строке ниже замените адрес своим адресом:

Отредактируйте секции CV

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

Опуститесь ниже до секции «Professional Profile», нажмите правой кнопкой на параграф с текстом, чтобы инспектировать его.

В инспекторе выделится тег p — данный тег отвечает за создание параграфа с текстом.

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

Тем самым мы знаем, что каждая секция кода обернута в теги <div class="cv-item">...</div>. div означает division и такие теги служат для структурирования контента на сайте, создания лейаута.

Теперь инспектируйте секцию CV с заголовком — «Professional Profile».

Сначала вы увидите очередной набор тегов div. Всё это потому, что заголовок, который нас интересует вложен в эти теги.

Нажмите треугольник рядом с этим заголовком, чтобы развернуть его и увидеть контент, после чего сделайте тоже самое со следующей строкой, пока вы не увидите текст «Professional Profile». Он находится между <h2>...</h2> тегами, что означает заголовок второго уровня:

Наконец мы знаем, как выглядит код каждой части CV секции, вернёмся к Sublime Text и начнём редактирование.

Поместите курсор в самом верху HTML документа, чтобы начать поиск с этого места. Нажмите CTRL + F, чтобы найти «cv-item». Продолжайте искать пока не найдёте код <div class="cv-item"> сразу после <h2>Professional Profile</h2>.

Замените Professional Profile на текст, который вас устраивает. Оберните каждый параграф с текстом в <p>...</p> теги.

Когда вы закончите, убедитесь что открывающий тег параграфа, последний параграф секции содержит атрибут class со значением last, вот так: <p class="last">.....</p>. Это добавляет стили из таблицы CSS стилей нашего шаблона — пространство между текстом секции.

После того как документ сохранён, обновите страницу, будет видно, что две верхние секции были кастомизированы.

Теперь мы можем перейти к редактированию оставшихся элементов CV секции, таким же образом как мы это сделали с «Professional Profile».

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

Проинспектируйте должность:

Проинспектируйте время работы:

Проинспектируйте маркированный список:

Используйте такой же подход, который мы применяли во время редактирования секции «Professional Profile», для редактирования оставшихся CV секций. Чтобы отредактировать должность, время и маркированный список найдите соответствующий код, который мы видели в окне инспектора.

Используйте p теги для создания параграфов и как в случае с «Professional Profile» секцией, если секция заканчивается параграфом <p>, добавьте class="last" то есть <p class="last">...</p>.

Обратите внимание: если вы хотите добавить новые секции CV, или убрать уже существующую, вам нужно найти теги в инспекторе, которые оборачивают всю секцию.

В этом примере вы увидите, что вся секция обернута тегами <div class="cv-item">...</div>.

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

Отредактируйте копирайт

Мы закончили с редактированием CV секций и у нас остался последний пункт нашего списка для редактирования — копирайт в футере. Опять же мы будем использовать знакомый нам процесс. Нажмите правой кнопкой мыши на копирайт, чтобы проинспектировать его:

Найдите соответствующий код в вашем HTML и отредактируйте его добавив текущий год и собственное название:

На этом всё!

Отлично! Мы только что кастомизировали этот HTML шаблон и он отображает ваш контент. Надеюсь теперь вы чувствуете себя более уверенно и у вас не возникнут сложности с кастомизацией в будущем.

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

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

Вам могут помочь ссылки ниже, набор отличных обучающих материалов:

• Ваш первый HTML документ за 60 секунд
• Выучите HTML и CSS за 30 дней
• Лучший способ изучения HTML
• Введение в HTML

Любой одностраничный сайт, интернет магазин или портал состоит из нескольких «частей», основой является язык разметки HTML. Он отвечает за то, где будут расположены объекты на странице. Существует две наиболее популярных структуры сайтов html:

• Блочная;
• Табличная.

Блочная верстка использует в качестве основы тег «div» и каждый объект получается в собственном блоке. Удобно это тем, что в них легко добавлять классы CSS, которые отвечают за то, как будет выглядеть шрифт или картинка. Табличная верстка является устаревшей, но до сих пор встречается на просторах сети. Главная ее задумка – разбить сайт на ячейки таблицы и уже в каждую ячейку вставляется необходимый объект или текст. Это неудобно тем, что добавляя новый не предусмотренный ранее объект, приходится высчитывать заново размер таблицы и подгонять его по ширине и высоте. Редактирование включает в себя либо добавление новых атрибутов (свойств тегов), либо подключение классов CSS, которые создаются в отдельном документе.
 

Как происходит верстка сайта в html

Верстка сайта html – это сложная и затратная по времени процедура. Задача верстальщика перенести макет сайта, который, как правило, создается в PSD формате в Photoshop, в HTML код. Формат PSD немного облегчает задачу web разработчика, тем, что он может работать с каждым объектом и его свойствами отдельно. Например, узнать цвет фона или формат текста. Это что касается верстки сайта с нуля. Сайт можно создать и используя, конструкторы, либо готовые модели. Это в свою очередь удобно лишь отчасти. Так как такой ресурс будет ограничен в функционале и не столь привлекателен со стороны. Но если вам необходим одностраничный сайт, то можно использовать и этот вариант.

Меняем картинку на сайте

Если нужно залить картинку на html верстальщику достаточно перейти на нужный слой в Photoshop выделить его и сохранить изображение в формате JPG или PNG в папку с объектами сайта. Затем используется тег «img» с атрибутом «scr=”путь к картинке и ее название”». Если картинка у вас хранится отдельно, то процедуру в Photoshop пропускаете и сразу прописываете путь к ней. И все, изображение появится на странице в браузере.

Обратите внимание на следующую строчку, с тегом «p» и «img» в примере:

Добавим еще тег «p», чтобы мы могли поместить картинку в нужном месте экрана, вместо «p» можно использовать «div». Атрибут «align=”center”» используется для того чтобы изображение размещалось по центру. Если вместо «center», написать «left» или «right», то изображение изменит свое положение влево или вправо. Чтобы задать размер картинки, используем следующие атрибуты:

• height – высота;
• width – ширина.

Теперь изменим значение высоты и ширины (смотрим на цифры):

Как вы можете видеть, изображение теперь вытянутое по вертикали. Так парируя атрибутами, можно менять облик сайта. Замена текста быстро и без хлопот Если перед вами встал вопрос, как менять текст в html, то знайте, это еще проще, чем добавление картинки. Если вставить любой текст в документ с HTML кодом, то он будет отображаться, но без какой-либо разметки или форматирования.

Обратите внимание лишь на код, который идет в теге «body». Это и есть «тело» сайта, все, что находится вне него, отображаться не будет. Чтобы корректно поместить текст, удобно использовать тег «div» или «p» и уже в них добавлять различные классы CSS. Если же вы форматируете лишь на HTML, то придется работать с тегами. Существует множество тегов, которые сделают текст: наклонным и жирным, подчеркнутым, перечеркнутым и любым каким вы захотите:

Но если вам нужно добавить заголовок, то можно использовать сразу тег «h1»…«h6», отличаться они будут по размеру:

Плюсы и минусы редактирования на HTML Минусы редактирования сайтов или книг только при помощи HTML заключается в том, что нельзя создать общий «алгоритм» форматирования объектов. Приходится каждый раз прописывать атрибуты к тегам. Это все очень затратно по времени. В свою очередь это легко, не нужно никаких глубоких познаний верстки. Но все-таки стоит уделить время и ознакомиться с такой замечательной вещью, как стили CSS. CSS – используется чисто для форматирования текста, картинок, боксов и прочих объектов на сайтах. Он удобен тем, что создав один класс в CSS и описав его, вы можете применять его бесконечно раз в коде HTML. И вам не придется в каждом новом теге прописывать заново атрибуты и их свойства. Достаточно просто добавить атрибут «class=”…”». Как в данном примере:

Классы в CSS могут именоваться по-разному, вы сами даете им названия. Но совет, лучше придумывать тематические названия. В примере класс «gl-text» содержит следующий код в CSS:

И достаточно легко догадаться, что он форматирует именно текст. text-align: center – означает что текст располагается по центру. padding: 50px 0 45px 0 – расположение относительно других полей и текста. font-size: 24px — размер шрифта. font-family: ‘gotham_proregular’ — стиль шрифта текста. border-bottom: 1px solid rgba(224, 42, 42, 0.1) — разделительная линия и ее цвет. line-height: 10px — устанавливает межстрочный интервал. Подводя итоги нужно упомянуть следующее:
 

1. Пишите код понятно, разбивайте его на блоки, старайтесь не писать все в одну строку;
2. Если вы новичок, то обязательно ознакомьтесь не только с HTML, но и CSS, он используется сейчас при верстке каждого сайта;
3. Не забывайте закрывать теги: «p»«/p», «div»«/div» (но например тег «img» закрывать не нужно);
4. Старайтесь тестировать написанный код в нескольких браузера, особенно в IE.

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

Итак, у вас есть готовый сайт на UMI.ru. С профессиональным дизайном, тщательно спроектированными интерфейсами, настроенными стилями форматирования. Но что делать, если текущий шаблон вам не совсем подходит: хочется изменить внешний вид сайта, поиграть с цветами, адаптировать веб-страницы под ваш корпоративный стиль или ваше видение? Как изменить сайт?

Прежде всего, внимательно изучить все основные правила юзабилити и сверять с ними все дальнейшие действия. И действовать!

А можно такой же, но с перламутровыми пуговицами? Да!

• Поставьте ваш логотип в левом верхнем углу сайта. Если у вас нет логотипа – это может быть любое имиджевое изображение, дающее понять, чему посвящен сайт. Это может быть даже ваша фотография – если бизнес привязан к вашей личности (например, уроки английского языка).
• Замените основное имиджевое изображение в “шапке” сайта. Это ключевой элемент вашего брендинга и первое, что увидит посетитель вашего сайта, поэтому подбирайте изображение очень тщательно. Оно должно быть качественным, демонстрировать суть вашего предложения и особенности позиционирования. Использовать его можно также в качестве временного или постоянного баннера, рекламирующего какое-либо предложение или акцию.
• Добавьте картинки, иллюстрирующие текст сайта. Это легко сделать при помощи визуального редактора. Иллюстрации в тексте нужны, но, в зависимости от использования, они могут как улучшить сайт, так и испортить его. Про то, как грамотно работать с изображениями для веб-страниц, мы поговорим отдельно, в другой раз.

Исходный шаблон дизайна:

Шаблон, измененный при помощи картинок:

2. Самый радикальный способ — изменить шаблон дизайна.

Этот способ подойдет, если вы хотите полностью изменить внешний вид сайта, выбрав другую тематику оформления. Для этого просто зайдите в раздел “Дизайн – Смена дизайна” в панели управления вашего сайта и выберите новый дизайн. При этом, вы можете сохранить все внесенные изменения: тексты, картинки, структуру, объекты каталога и т.д.

3. Самый творческий способ — редактирование стилей CSS.

CSS — это технология описания внешнего вида веб-страниц, написанных на языке разметки HTML. Определенные стили CSS уже применены к готовым сайтам на UMI.ru и описывают внешний вид всех элементов: текстов, кнопок, ссылок, меню, “хлебных кошек” и др. Для их изменения необходимо прописать новые стили в специальном файле, который находится в разделе “Дизайн” — “Управление CSS” в панели управления вашего сайта (доступно на платном тарифе).

С помощью стилей CSS можно изменить:

• фон сайта (вставить фоновую картинку или поменять цвет)
• цвет, расположение и угол наклона объектов
• шрифты
• форматирование абзацев
• добавить тени, рамки или закругления объектам
• передвинуть блоки или изменить их форму
• многое другое.

Все это можно сделать самостоятельно, но вам потребуются некоторые базовые знания о редактировании стилей CSS. Не пугайтесь, вам не придется сочинять код: все стили уже есть в специальных учебниках. Разобраться в основах вам поможет отличный самоучитель CSS — htmlbook.ru, а получить нужный код — генераторы CSS:  css3maker.com и css3generator.com. А если у вас есть знакомые, знающие язык HTML, то они с легкостью помогут в редактировании стилей.

И сайт превращается…

Как изменить сайт при помощи CSS и посмотреть, какие стили уже применены к элементам страниц — вы узнаете из нашего руководства. 

А чтобы вы поняли, насколько это легко — разберем несколько примеров.

Действия с объектами

Первая задача: изменение цвета кнопки с голубого на красный.

Перед тем, как изменить сайт, не забудьте сохранить его резервную копию — тогда вы сможете его легко восстановить с случае неполадок. Теперь можно приступать к редактированию. При помощи инструмента инспектирования кода (в нашем примере использован Firebug в браузере Mozilla Firefox) находим код необходимого элемента — в данном случае, это код кнопки:

В правом окошке инспектора “Стиль” прописан код, обозначенный разными цветами:  

• черным — класс (в данном случае, кнопка),
• зеленым — CSS-свойство (в данном случае, цвет),
• синим — значение (в данном случае, голубой),
• зачеркнутый код обозначает, что данный стиль не работает, поскольку конфликтует с другим, более приоритетным стилем.

Мы видим, что класс кнопки называется .direction_title. Чтобы понять, какой фрагмент представленного кода отвечает за цвет, можно “перевести” зеленые теги, воспользовавшись поиском в справочнике. За цвет фона кнопки отвечает свойство background (не путайте со свойством color, оно отвечает за цвет шрифта). Сейчас кнопке присвоен стиль background: #1f1f1f; где background — это свойство, определяющее стиль фона, а #1f1f1f — голубой цвет в шестнадцатеричной кодировке цвета.

Чтобы сделать кнопку красной, нужно узнать цифровой код красного цвета. Его можно посмотреть с помощью онлайн-палитры, либо в любом графическом редакторе, которым вы привыкли пользоваться (например, Microsoft Paint, Photoshop, онлайн-редактор и т.п.). Итак, код красного цвета — #ff0000:

Теперь перейдем в раздел “Дизайн” — “Управление CSS” админзоны нашего сайта и пропишем новое значение для класса кнопки, соблюдая тот же синтаксис, что показывает инспектор в исходном коде: между открывающей и закрывающей фигурной скобкой помещают CSS-свойства со значениями, разделяя их знаком “;”.

Что получилось:
 

    Было                                                                                                   Стало

Вторая задача: перемещение кнопки вверх и вправо на 100px.

Для начала посмотрим значения текущего расположения кнопки с помощью инспектора, если нужно — “переведем” через самоучитель. Сейчас стоят значения bottom: 20px; left: 40px; где bottom — расстояние от нижнего края кнопки до нижнего края родительского блока, а left — расстояние от левого края кнопки до левого края родительского блока.

Таким образом, для перемещения кнопки вверх и вправо на 100px нужно прибавить по 100px снизу и слева — получится 120px снизу и 140px слева. Добавим новые значения в наш файл стилей к уже прописанному классу нашей кнопки .direction_title, соблюдая синтаксис исходного кода:

Что получилось:

    Было                                                                                                  Стало

Изменение шрифтов

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

Задача: изменить размер и цвет шрифта в заголовке “Новости”.

Найдем класс заголовка и значения стилей при помощи инспектора кода Firebug, если нужно — “переведем” значения через справочник.

Мы видим, что класс заголовка “Новости” называется .shop-heading, за размер шрифта отвечает свойство font-size, значение которого сейчас — 18px; а за цвет — свойство color со значением #111111 (темно-серый).

Перейдем в раздел “Дизайн” — ”Управление CSS” админзоны сайта и изменим эти значения на нужные нам. Например, увеличим размер до 28px, а цвет изменим на красный. Как вы помните, цвет указывается в шестнадцатеричном коде:

Сохраняем и смотрим, что получилось. Обратите внимание, что при изменении стиля элемента внешний вид поменяют ВСЕ элементы на сайте, к которым применен данный стиль. В нашем случае, стиль .shop-heading применен к заголовкам “Новости” и “Популярные товары”.

Что получилось:

Было                                                                                                          Стало

Еще несколько примеров работы с CSS описаны в нашем руководстве.

Возможные сложности

2. Вам не понравился результат работы со стилями. Решение: просто очистить файл стилей CSS в админзоне.

3. Если после изменения CSS вы сменили шаблон дизайна, то прописанные вами стили сохранятся, но могут не работать в случае, если на новом шаблоне используется другая верстка. Решение: внести изменения в CSS заново, с учетом новой верстки.