Вы отписались от новостей о книгах бюро
Мы напишем вам по адресу , когда выйдут новые книги.

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

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

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

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

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

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

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

Авторы

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

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

Оглавление

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

  • Веб‑инспектор

Модули

  • Текстовые модули, типографика и шрифт

  • Иллюстрации

  • Таблицы

  • Формы

  • Шапки, меню, подвалы

  • Тест

Расстановка

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

  • Сетка на флексбоксах

  • Сетка на гридах

  • Адаптивная вёрстка

  • Тест

Страницы

  • Принципы вёрстки страниц

  • Визитка

  • Портфолио

  • Просмотраница

  • Статья

  • Каталог

  • Интерфейс

  • Бутстрап для быстрой вёрстки страниц

  • Конструкторы сайтов: Тильда, Редимаг, Вебфлоу

  • Тест

Спецэффекты

  • Анимация

  • Трансформации и 

  • Маски, режимы смешения и фильтры

  • Параллакс

  • Тест

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

  • Сверка с дизайном

  • Тестирование на устройствах и в браузерах

  • Тест

Публикация

  • Принципы работы сайтов

  • Хостинг и домен, публикация и управление сайтом

  • Превью страницы для соцсетей и чатов

  • Сбор статистики посещений, Яндекс‑метрика, Гугль‑аналитика

  • Разметка для поисковиков

  • Чеклист публикации сайта

  • Тест

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

  • Руководителю: постановка задачи, ограничения

  • Дизайнеру: подготовка и передача макетов и файлов, юридическая чистота

  • Чеклист передачи дизайна в разработку

  • Клиенту: приёмка и работа с замечаниями

  • Чеклист приёмки вёрстки

  • Тест

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

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

Было

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

Стало

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

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

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

bureau.ru

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

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

Static

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

Relative

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

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

Absolute

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

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

Fixed и sticky

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

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

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

Static

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

Relative

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

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

Absolute

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

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

Fixed и sticky

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

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

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

90%
90%
Тесты помогают глубже понять материал. Если результат не устраивает, читатель снова изучает материал и пересдаёт тест
Тест предлагает вопросы на знание материала и анализ примеров: что хорошо и плохо, как улучшить
bureau.ru
Тест предлагает вопросы на знание материала и анализ примеров: что хорошо и плохо, как улучшить
90%
90%
Тесты помогают глубже понять материал. Если результат не устраивает, читатель снова изучает материал и пересдаёт тест
90%
90%
Тесты помогают глубже понять материал. Если результат не устраивает, читатель снова изучает материал и пересдаёт тест
bureau.ru

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

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

bureau.ru
К книге удобно обращаться за подсказками прямо во время работы
Примеры кода сопровождаются пояснениями и демонстрацией результата в виде готовой вёрстки
Примеры кода сопровождаются пояснениями и демонстрацией результата в виде готовой вёрстки
К книге удобно обращаться за подсказками прямо во время работы
К книге удобно обращаться за подсказками прямо во время работы
bureau.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

О книге

Авторы

Василий Половнёв

Игорь Петров

Издатель и арт‑директор

Артём Горбунов

Разработчики

Рустам Кулматов

Василий Половнёв

Андрей Ерес

Игорь Петров

Тестировщик

Сергей Фролов

Дизайнер обложки и форзаца

Сергей Фролов

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

Пишите: books@artgorbunov.ru

Отправить
Поделиться
Запинить