🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру

Удобно листать не только прокруткой, но и клавишами‑стрелками:

 
между важными местами
Shift
между
разворотами
Васи­лий Полов­нёв, Игорь Пет­ров

ХТМЛ.
Вёрстка сайтов

Изда­тель­ство Бюро Гор­бу­нова
2021
Василий Половнёв, Игорь Петров

ХТМЛ.
Вёрстка сайтов

Издательство Бюро Горбунова
2021
удк 004.42
ббк З973.42
П52
Васи­лий Полов­нёв, Игорь Пет­ров
П52
ХТМЛ. Вёрстка сай­тов для дизай­не­ров, редак­то­ров и руко­во­ди­те­лей.—
М.: Изд‑во Бюро Гор­бу­нова, 2021

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

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

ISBN 978‑5‑6041630‑9‑2
© Бюро Гор­бу­нова

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

удк 004.42
ббк З973.42
П52
П52
Василий Половнёв, Игорь Петров
ХТМЛ. Вёрстка сайтов для дизайнеров, редакторов и руководителей.—
М.: Изд‑во Бюро Горбунова, 2021

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

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

ISBN 978‑5‑6041630‑9‑2
© Бюро Горбунова

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

Скрыто 136 разворотов
⌘
✎
🕑
★

Чтобы изме­нить вырав­ни­ва­ние отдель­ного эле­мента внутри ячейки, исполь­зуем justify-self и align-self

.cross {
  justify-self: start;
  align-self: start;
}

.pencil {
  justify-self: end;
  align-self: start;
}

.clock {
  justify-self: start;
  align-self: end;
}

.star {
  justify-self: end;
  align-self: end;
}
⌘
✎
🕑
★

Чтобы изменить выравнивание отдельного элемента внутри ячейки, используем justify-self и align-self

.cross {
  justify-self: start;
  align-self: start;
}

.pencil {
  justify-self: end;
  align-self: start;
}

.clock {
  justify-self: start;
  align-self: end;
}

.star {
  justify-self: end;
  align-self: end;
}

Если после созда­ния столб­цов и строк в кон­тей­нере оста­лось сво­бод­ное про­стран­ство, то его можно рас­пре­де­лить, как во флек­с­бок­сах, с помо­щью justify-content и align-content

.grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 180px 180px;
  grid-template-rows: 60px 60px;
  justify-content: start;
  align-content: start;
}

justify‑content и align‑items во флексбоксах 

Первый элемент
Второй элемент
Третий элемент
Четвёртый элемент
Первый элемент
Второй элемент
Третий элемент
Четвёртый элемент

Если после создания столбцов и строк в контейнере осталось свободное пространство, то его можно распределить, как во флексбоксах, с помощью justify-content и align-content

.grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 180px 180px;
  grid-template-rows: 60px 60px;
  justify-content: start;
  align-content: start;
}

justify‑content и align‑items во флексбоксах 

Упражнение: выравнивание гридами

Изме­ните ЦСС так, чтобы пер­вый ука­за­тель повто­рил второй.


  
align-content: space-between;

  
align-items: end;

  
display: grid;

  
display: grid;

  
grid-template-columns: min-content min-content;

  
grid-template-rows: min-content min-content;

  
justify-content: space-between;





.sign {




}




.sign__header,


.sign__footer {




}




.sign__footer {




}

Вёрстка

  • Платформы 1⁠—4

  • Макдональдс

  • Бюро находок

  • Платформы 5⁠—8

  • Камеры хранения

  • Туалет

  • Кассы

  • Метро

2

Дизайн

  • Платформы 1⁠—4

  • Макдональдс

  • Бюро находок

  • Платформы 5⁠—8

  • Камеры хранения

  • Туалет

  • Кассы

  • Метро

2

Вёрстка

  • Платформы 1⁠—4

  • Макдональдс

  • Бюро находок

  • Платформы 5⁠—8

  • Камеры хранения

  • Туалет

  • Кассы

  • Метро

2

Дизайн

  • Платформы 1⁠—4

  • Макдональдс

  • Бюро находок

  • Платформы 5⁠—8

  • Камеры хранения

  • Туалет

  • Кассы

  • Метро

2

Упражнение: выравнивание гридами

Измените ЦСС так, чтобы первый указатель повторил второй.


  
align-content: space-between;

  
align-items: end;

  
display: grid;

  
display: grid;

  
grid-template-columns: min-content min-content;

  
grid-template-rows: min-content min-content;

  
justify-content: space-between;





.sign {




}




.sign__header,


.sign__footer {




}




.sign__footer {




}

Где использовать гриды, а где флексбоксы

И гриды, и флек­с­боксы под­дер­жи­ва­ются всеми совре­мен­ными бра­у­зе­рами. Больше того, в неко­то­рых слу­чаях гриды и флек­с­боксы вза­и­мо­за­ме­ня­емы — меня­ешь display: inline-grid на inline-flex, всё работает.

Сове­туем выби­рать между флек­с­бок­сами и гри­дами, ори­ен­ти­ру­ясь на свой опыт, задачу и код: какой вари­ант даст меньше кода, какой проще вос­при­ни­мать и поддерживать?

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

С дру­гой сто­роны, если важно впи­сать эле­менты в сетку из N коло­нок, лучше взять гриды. Код будет лако­нич­нее и понятнее:

Грид

.curriculum {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5em;
}

Флексбокс

.curriculum {
  --columns: 4;
  --gap: .5em;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--gap);
}

.curriculum > * {
  flex: 1 1 calc(100% / var(--columns));
  max-width: calc((100% / var(--columns)) - var(--gap));
}

Чтобы мастерски овладеть флексбоксами и гридами, сыграйте в игры:

Где использовать гриды, а где флексбоксы

И гриды, и флексбоксы поддерживаются всеми современными браузерами. Больше того, в некоторых случаях гриды и флексбоксы взаимозаменяемы — меняешь display: inline-grid на inline-flex, всё работает.

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

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

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

Грид

.curriculum {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5em;
}

Флексбокс

.curriculum {
  --columns: 4;
  --gap: .5em;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--gap);
}

.curriculum > * {
  flex: 1 1 calc(100% / var(--columns));
  max-width: calc((100% / var(--columns)) - var(--gap));
}

Чтобы мастерски овладеть флексбоксами и гридами, сыграйте в игры:

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

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

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

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

Яндекс‑метрика для анализа посещаемости и посетителей сайта

Анализ посетителей сайта 

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

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

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

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

Яндекс‑метрика для анализа посещаемости и посетителей сайта

Анализ посетителей сайта 

Скрыто 79 разворотов
Закладки
Добавьте закладки
Ничего не нашлось