ХТМЛ. Вёрстка сайтов для дизайнеров, редакторов и руководителей
Электронный учебник

Представляем практическое руководство по ХТМЛ‑вёрстке для дизайнеров, редакторов, руководителей и всех причастных к созданию продуктов в интернете.

Клиенты, работодатели и коллеги выше ценят дизайнера, который не только рисует макеты, но и ставит задачу верстальщику, принимает его работу или даже верстает сам. Если редактор хочет стать главредом, ему мало писать в Гугль‑доках — нужно изучать возможности вёрстки, чтобы самому собирать промостраницы, готовить интерактивные материалы или просто править текст на сайте. Руководителю иногда приходится прикрывать команду в ночь перед дедлайном, и если он самостоятельно поправит текст и вёрстку, это может спасти дедлайн. Он знает, как поставить задачу разработчику, чтобы получить предсказуемый результат, и как проверять вёрстку, чтобы не оплошать при запуске. Научиться всему этому помогает наш учебник.

Книга последовательно обучает языкам ХТМЛ и ЦСС — от вёрстки простых модулей до создания сложных страниц с анимациями и спецэффектами. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, правильно выбрать хостинг, настроить красивый шаринг в соцсети и подключить системы аналитики.

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

Разобраться в ХТМЛ и ЦСС помогают живые примеры: рядом с кодом сразу виден результат его работы.

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

Авторы

Василий Половнёв
Ведущий разработчик бюро, соавтор «Советов», преподаватель Школы бюро

Игорь Петров
Разработчик, соавтор «Советов», преподаватель Школы бюро

КПД ❔
12 дизайнеру, 8 редактору и руководителю

Для компаний

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

Конструкторы сайтов: Тильда, Редимаг, Вебфлоу
Бутстрап для быстрой вёрстки страниц
Принципы вёрстки страниц
Шапки, меню, подвалы
Визитка
Портфолио
Промостраница
Статья
Каталог
Интерфейс
Тест

Спецэффекты

Градиенты
Анимация
Трансформации и 3Д
Маски, режимы смешения и фильтры
Параллакс
Тест

Контроль качества

Сверка с дизайном
Тестирование на устройствах и в браузерах
Тест

Публикация

Принципы работы сайтов
Хостинг и домен, публикация и управление сайтом
Фавыконка
Превью страницы для соцсетей и чатов
Сбор статистики посещений, Яндекс‑метрика, Гугль‑аналитика
Разметка для поисковиков
Чеклист публикации сайта
Тест

Как работать с верстальщиком

Руководителю: постановка задачи, ограничения
Дизайнеру: подготовка и передача макетов и файлов, юридическая чистота
Чеклист передачи дизайна в разработку
Клиенту: приёмка и работа с замечаниями
Чеклист приёмки вёрстки
Тест

В бюро радикально переосмыслили формат электронной книги

О нашем формате❱

В бюро радикально переосмыслили формат электронной книги

Было

Существующие «е‑буки» далеки от высоких издательских стандартов оформления, неудобны для навигации и поиска. Типографика не выдерживает критики, причём шрифты и вёрстка неконтролируемы авторами и издателями. Книги случайно разбиты на экранные страницы — сколько ни открывай, одна и та же иллюстрация может оказаться наверху, внизу или даже на следующей странице. На планшете страницы сбиваются от случайного поворота устройства.

Стало

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

О нашем формате❱

Книга на экране

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

bureau.ru

Позиционирование

Есть несколько способов разложить элементы по странице. Мы постепенно разберём их все, а начнём с самого простого — позиционирования свойством position. Этим свойством элемент можно разместить в любом месте страницы, задав ему координаты. Есть пять значений свойства:

Static

Это значение по умолчанию, отсутствие какого‑либо позиционирования. Элементы просто выстраиваются друг под другом.

Relative

Элемент с относительным позиционированием сдвигается со своего места, не влияя на положение соседних элементов.

position: relative;
left: 50px;
top: 80px;

Absolute

Элемент с абсолютным позиционированием располагается по заданным координатам, а из того места, где он был, удаляется.

position: absolute;
left: 50px;
top: 80px;

Fixed и sticky

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

Позиционирование

Static

Relative

position: relative;
left: 50px;
top: 80px;

Absolute

position: absolute;
left: 50px;
top: 80px;

Fixed и sticky

Проверка знаний

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

90%

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

Тест предлагает вопросы на знание материала и анализ примеров: что хорошо и плохо, как улучшить

bureau.ru

Тест предлагает вопросы на знание материала и анализ примеров: что хорошо и плохо, как улучшить

90%

bureau.ru

Справочник приёмов вёрстки

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

bureau.ru

🔍

К книге удобно обращаться за подсказками прямо во время работы

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

🔍

К книге удобно обращаться за подсказками прямо во время работы

🔍

К книге удобно обращаться за подсказками прямо во время работы

bureau.ru

От простого к сложному

Читатель учится верстать постепенно: от небольших компонентов к сложным страницам с модульной сеткой.

Вопросы и ответы

Почему книги доступны только по подписке?

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

Запись в фейсбуке Артёма Горбунова

Как подписаться?

Нажмите на кнопку «Подписка» в правом нижнем углу страницы книги.

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

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

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

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

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

Что делать, если книга не открывается?

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

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

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

Что такое Бюросфера?

Бюросфера появилась как способ познакомиться с уважаемыми советчиками — постоянными посетителями раздела «Советы» на сайте бюро. Любой желающий может завести личную страницу в Бюросфере с рассказом о себе и о своих работах. Со временем Бюросфера стала способом авторизации и оформления покупок — у каждого пользователя Бюросферы появляется учётная запись на сайте бюро. Если вы просто хотите подписаться на книгу или купить другой продукт, необязательно что‑то писать о себе — оставьте страницу пустой. Мы не публикуем адреса электронной почты.

Как отменить подписку и что будет с книгой?

Если вы подписаны и авторизованы, на зелёной кнопке в правом нижнем углу будет галочка: «✓Подписка». Нажмите на кнопку, там будет ссылка «Отмена подписки». После отмены подписки книга станет вам недоступна. Когда захотите, вы сможете подписаться заново, но при этом нужно будет заново оплатить полную стоимость первого года (1200 ₽).

Все вопросы и ответы❱

Демоглава

Знакомство с ХТМЛ и ЦСС

Попробовать бесплатно

Теги, атрибуты, шрифты, упражнение