Верстка страницы по макету: Как сверстать макет. Пошаговый план — журнал «Доктайп»

Содержание

Создание макета страницы и верстка

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

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

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

д. Все это многообразие экранов табличная верстка оказалась не в состоянии удовлетворить. Поэтому постепенно ей на смену пришла блочная верстка. Блочная верстка — это отосительно условное название способов и приемов верстки, когда в большинстве веб-страниц для разметки используется CSS-свойство float, а основным строительным элементов веб-страниц является элемент <div>, то есть по сути блок. Используя свойство float и элементы div или другие элементы, можно создать структуру страницы из нескольких столбцов, как при табличной верстке, которая будет значительно гибче.

Ранее в одной из прошлых тем рассматривалось действие свойства

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

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


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная верстка в HTML5</title>
        <style>
			div{
				margin: 10px;
				border: 1px solid black;
				font-size: 20px;
				height: 80px;
			}
            #header{ 
				background-color: #ccc;
			}
			#sidebar{
				background-color: #ddd;
			}
			#main{
				background-color: #eee;
				height: 200px;
			}
			#footer{ 
				background-color: #ccc;
			}
        </style>
    </head>
    <body>
		<div>Шапка сайта</div>
		<div>Сайбар</div>
		<div>Основное содержимое</div>
		<div>Футер</div>
    </body>
</html>

То есть пока получается примерно следующая страница:

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

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

float: left и предпочтительную ширину. Ширина может быть фиксированной, например, 150 px или 8 em. Либо также можно использовать проценты, например, 30% — 30% от ширины контейнера body. С одной стороны, блоками с фиксированной шириной легче управлять, но с другой процентные значения ширины позволяют создавать более гибкие, резиновые блоки, которые изменяют размеры при изменении размеров окна браузера.

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

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

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


#sidebar{
	background-color: #ddd;
	float: left;
	width: 150px;
}
#main{
	background-color: #eee;
	height: 200px;
	margin-left: 170px; /* 150px (ширина сайдбара) + 10px + 10px (2 отступа) */
}

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

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

Создание правого сайдбара будет аналогично, только теперь нам надо установить у сайдбара значение float: right, а у блока основного содержимого — отступ справа:


#sidebar{
	background-color: #ddd;
	float: right;
	width: 150px;
}
#main{
	background-color: #eee;
	height: 200px;
	margin-right: 170px;
}

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

НазадСодержаниеВперед

Верстка макета — Работа проектировщика — Принципы — Контур.Гайды

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

Системно мыслить. Лучше продумывать детали реализации и краевые случаи ещё на этапе дизайна.
Ускорять разработку. Разработчик видит закономерности и иерархию сущностей. Это уменьшает количество ошибок на этапе разработки и количество правок при тестировании.
Сокращать текстовые описания. Самодокументируемый* макет требует меньше пояснений и комментариев на полях.
Самодокументируемым разработчики называют код настолько понятный, что к нему не нужны дополнительные комментарии. Здесь мы применили этот термин к макетам.
Дорабатывать дизайн в будущем. Легче поддерживать и дорабатывать макет, особенно когда проектировщиков в команде несколько.
Снижать нагрузку на компьютер. «Лёгкие» макеты быстрее загружаются, в них быстрее сохраняются изменения.

Блочная модель

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

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

По умолчанию у элементов нет отступов внутри и снаружи, но их можно настроить. Для этого есть специальные css-атрибуты:

Padding — это отступ от контента до края блока.
Border — обводка.
Margin — отступы до соседних элементов.

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

Figma позволяет верстать очень близко к html-коду. Используйте это, включайте автолейауты и констрейнсы, чтобы помочь разработчику быстрее понять задумку дизайнера и точнее воспроизвести вёрстку макета средствами html и css.

Названия слоев и фреймов

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

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

А здесь, что перед нами не просто картинка, а аватарка:

Размеры элементов

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

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

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

Группировка элементов

Группируйте элементы так, как они будут связаны в html-вёрстке. Объединение по другим принципам может запутать разработчика. Например, здесь непонятно, связаны буллиты с текстом или нет:

Группируя с помощью фреймов и автолейаутов, можно показать, какая область ховера у элемента, и объяснить логику отступов между элементами:

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

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

Компоненты

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

Организация конкретного компонента

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

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

Организация множества компонентов

Для удобства поиска придумайте понятные названия для компонентов. А в их описании пропишите ключевые слова. Расспросите коллег или вспомните какими терминами они называют подобные контролы. Не забудьте прописать варианты с русско-английской транскрипцией.

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

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

Инстанс (instance) — так разработчики называют экземпляр объекта, который наследует характеристики родительского объекта

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

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

Стили

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

Как шутят фронтендеры — в макете неопытного дизайнера по пятьдесят оттенков серого

Называя стиль отталкивайтесь в первую очередь от его функции — как он используется в интерфейсе. Например:

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

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

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

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

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

Как рисовать без лишних элементов

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

Как описывать разные состояния интерфейса

Не дублируйте страницу целиком, когда нужно описать поведение элементов интерфейса.

Don’t repeat yourself (DRY) — это принцип разработки, направленный на повторное использование кода. Но его также можно использовать и при вёрстке макетов. Следование правилу «не повторяйся» повышает читаемость и консистентность макетов.

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

Неправильно

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

Правильно

Именуйте корневые фреймы. Их названия видны даже при зумировании. С осмысленными названиями проще найти нужный фрагмент макета.

Если хотите собрать кликабельный прототип, но он портит читабельность макета — собирайте его на отдельной странице.

Как вовремя остановиться

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

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

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

Структурируя макет, будьте разумными в степени перфекционизма. Делайте макеты понятными, но не забывайте, что главный приоритет — продукт, а не макеты.

Знакомство с текстовыми редакторами и документами с макетами страниц в Pages на Mac

Pages

Искать в этом руководстве

Руководство пользователя

страниц для Mac

Добро пожаловать
- Введение в страницы
- Текстовый редактор или верстка?
- Знакомство с изображениями, диаграммами и другими объектами
- - Создайте свой первый документ
  - Введение в создание книги
  - Используйте шаблоны
- Найти документ
- Открыть или закрыть документ
- Сохранить и назвать документ
- Распечатать документ или конверт
- - Отменить или повторить изменения
  - Используйте боковые панели
  - Быстрая навигация
  - Просмотр символов форматирования и руководств по макету
  - Правители
  - Изменить вид документа
  - Сенсорная панель для страниц
- - Настроить панель инструментов
  - Установить настройки страниц
- - Создайте документ с помощью VoiceOver
  - Используйте VoiceOver для предварительного просмотра комментариев и отслеживания изменений
- Выберите текст и поместите точку вставки
- Добавить и заменить текст
- Скопируйте и вставьте текст
- - Добавить, изменить или удалить поле слияния
  - Управление информацией об отправителе
  - Добавление, изменение или удаление исходного файла в Pages на Mac
  - Заполнение и создание настраиваемых документов
- Используйте диктовку для ввода текста
- Акценты и специальные символы
- - Форматирование документа для другого языка
  - Используйте фонетические справочники
  - Использовать двунаправленный текст
  - Используйте вертикальный текст
- Добавьте дату и время
- Добавить математические уравнения
- Закладки и ссылки
- Добавить ссылки
- Измените шрифт или размер шрифта
- Установить шрифт по умолчанию
- Жирный, курсив, подчеркивание и зачеркивание
- Изменить цвет текста
- Добавление тени или контура к тексту
- Изменить заглавные буквы текста
- - Введение в стили абзаца
  - Применение стиля абзаца
  - Создание, переименование или удаление стиля абзаца
  - Обновление или возврат стиля абзаца
  - Используйте сочетание клавиш, чтобы применить стиль текста
- Копировать и вставлять стили текста
- - Автоматически форматировать дроби
  - Создание и использование стилей символов
  - Лигатуры
  - Добавить буквицы
  - Подъем и опускание символов и текста
  - Форматирование китайского, японского или корейского текста
- Добавить эффект выделения к тексту
- Форматирование дефисов, тире и кавычек
- Установить интервалы между строками и абзацами
- Установить поля абзаца
- Форматировать списки
- Установить позиции табуляции
- Выравнивание и выравнивание текста
- Установить разбиение на страницы и разрывы строк и страниц
- Форматировать столбцы текста
- Связать текстовые поля
- Добавьте границы и правила (линии)
- Установите размер и ориентацию бумаги
- Установить поля документа
- Настройка разворота страниц
- Шаблоны страниц
- - Добавить страницы
  - Добавляйте и форматируйте разделы
  - Изменение порядка страниц или разделов
  - Дублирование страниц или разделов
  - Удалить страницы или разделы
- - Оглавление
  - Библиография
  - Сноски и концевые сноски
  - Заголовки и колонтитулы
- Добавьте номера страниц
- Изменить фон страницы
- Добавить рамку вокруг страницы
- Добавляйте водяные знаки и фоновые объекты
- Создать собственный шаблон
- - Добавить изображение
  - Добавить галерею изображений
  - Редактировать изображение
- - Добавить и изменить фигуру
  - Объединяйте или разбивайте фигуры
  - Нарисуйте фигуру
  - Сохранение фигуры в библиотеке фигур
  - Добавление и выравнивание текста внутри фигуры
- Добавьте линии и стрелки
- Анимируйте, делитесь или сохраняйте рисунки
- - Добавить видео и аудио
  - Запись аудио
  - Редактировать видео и аудио
- Установка форматов фильмов и изображений
- - Размещение и выравнивание объектов
  - Размещайте объекты с текстом
  - Используйте направляющие для выравнивания
  - Слой, группировка и блокировка объектов
- Изменить прозрачность объекта
- Заполнение фигур и текстовых полей цветом или изображением
- Добавить границу к объекту
- Добавить подпись или заголовок
- Добавьте отражение или тень
- Используйте стили объектов
- Изменение размера, поворот и отражение объектов
- - Добавить или удалить таблицу
  - Выбор таблиц, ячеек, строк и столбцов
  - - Добавление или удаление строк и столбцов таблицы
    - Переместить строки и столбцы таблицы
    - Изменение размера строк и столбцов таблицы
  - Объединить или разъединить ячейки таблицы
  - - Изменение внешнего вида текста таблицы
    - Показать, скрыть или изменить заголовок таблицы
    - Изменение линий сетки и цветов таблицы
    - Используйте стили таблиц
  - Изменение размера, перемещение или блокировка таблицы
- - Добавляйте и редактируйте содержимое ячейки
  - - Форматирование дат, валюты и т. д.
    - Создание пользовательского формата ячейки таблицы
    - Форматирование таблиц для двунаправленного текста
  - Условное выделение ячеек
  - Алфавитизация или сортировка данных таблицы
- - Вычислять значения, используя данные в ячейках таблицы
  - Используйте справку по формулам и функциям
- - Добавить или удалить диаграмму
  - Преобразование диаграммы из одного типа в другой
- Изменить данные диаграммы
- Перемещение, изменение размера и поворот диаграммы
- - Изменение внешнего вида рядов данных
  - Добавьте легенду, линии сетки и другие маркировки
  - Изменение внешнего вида текста и меток диаграммы
  - Добавление границы и фона к диаграмме
  - Используйте стили диаграммы
- Проверять орфографию
- Поиск слов
- Найти и заменить текст
- Заменить текст автоматически
- Показать количество слов и другую статистику
- Просмотр аннотаций
- Установить имя автора и цвет комментария
- Выделите текст
- Добавить и распечатать комментарии
- Отслеживать изменения
- Отправить документ
- Опубликовать книгу в Apple Books
- - Введение в сотрудничество
  - Приглашайте других к сотрудничеству
  - Совместная работа над общим документом
  - Просмотр последней активности в общем документе
  - Изменение настроек общего документа
  - Прекратить совместное использование документа
  - Общие папки и совместная работа
  - Используйте Box для совместной работы
- Используйте iCloud Drive со страницами
- Экспорт в Word, PDF или другой формат файла
- Открытие книги iBooks Author в Pages
- Уменьшите размер файла документа
- Сохранение большого документа в виде файла пакета
- Восстановить более раннюю версию документа
- Переместить документ
- Удалить документ
- Заблокировать документ
- Защитить документ паролем
- Создание пользовательских шаблонов и управление ими
- - Передача документов с помощью AirDrop
  - Передача документов с Handoff
  - Перенос документов с помощью Finder
- Если вы не можете добавить или удалить страницу
- Если вы не можете удалить что-то из документа
- Если вы не можете найти кнопку или элемент управления
- Если форматирование страницы постоянно меняется
- Горячие клавиши
- Символы сочетания клавиш
Авторские права

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

Текстовый редактор: Используется для создания документов, содержащих в основном текст, таких как отчеты или письма. Эти документы имеют основной текст область, в которой вы печатаете, и текст перетекает с одной страницы на другую, при этом новые страницы создаются автоматически, когда вы достигаете конца страницы.
Когда вы открываете текстовый документ (или шаблон), вы можете просто начать печатать. Если вы хотите добавить текст отдельно от основного текста, вы можете добавить текстовое поле. Вы также можете добавлять изображения, диаграммы и другие объекты.
Макет страницы: Используется для создания документов с более индивидуальным дизайном, таких как информационные бюллетени, книги или плакаты. Документ макета страницы похож на холст, на который вы добавляете текстовые поля, изображения и другие объекты, а затем размещаете объекты на странице по своему усмотрению.
При открытии документа с макетом страницы (или шаблона) область основного текста отсутствует; чтобы добавить текст, вам нужно добавить текстовое поле и ввести его. Новые страницы необходимо добавлять вручную.

Шаблоны страниц предназначены либо для обработки текстов, либо для макетов страниц. То, как вы добавляете или удаляете страницы, работаете с объектами и т. д., зависит от типа выбранного вами шаблона. Если вы начинаете документ с одним типом шаблона, вы можете преобразовать документ в другой тип. Например, если вам нравятся стили текста, цвета и макет шаблона «Школьный бюллетень», но вам нужна гибкость дизайна документа с макетом страницы, вы можете преобразовать документ в макет страницы. См. Использование шаблонов.

Как узнать, какой тип документа вы просматриваете

Чтобы узнать, настроен ли шаблон (или документ) для обработки текста или макета страницы, откройте его. Щелкните на панели инструментов и проверьте, установлен ли флажок «Основная часть документа». Если да, то это текстовый документ. Если нет, то это документ макета страницы.

См. также Создайте свой первый документ в Pages на MacДобавление и замена текста в Pages на MacУстановите размер и ориентацию бумаги в Pages на MacДобавление страниц в Pages на Mac

Максимальное количество символов: 250

Пожалуйста, не указывайте личную информацию в своем комментарии.

Максимальное количество символов — 250.

Спасибо за отзыв.

Введение в текстовые документы и документы макета страницы в Pages для iCloud