Содержание
- 01. Начать
- 02. Проверьте CSS на сетку.
- 03. Определите позиции сетки
- 04. Используйте шаблон сетки.
- 05. Определите шаблон
- 06. Свяжите шаблон с классом.
- 07. Сделайте его отзывчивым
- 08. Работа над настоящим макетом.
- 09. Свяжите шаблон
- 10. Добавьте следующие области
- 11. Закончите первую сетку.
- 12. Добавьте белый фон.
- 13. Сделайте вторую сетку.
- 14. Добавьте столбцы.
- 15. Улучшите нижнюю часть страницы.
- 16. Отрегулируйте для среднего размера экрана.
- 17. Оплавление первой сетки.
- 18. Протестируйте свой макет.
- 19. Настройте дизайн для мобильных устройств.
- 20. Проверьте сетку в один столбец.
- 21. Завершите макет.
Макет для Интернета всегда был ограничен, на самом деле никогда не было ничего, посвященного тому, чтобы сделать контент простым для отображения в формате, который имеет смысл.
Еще в 90-х, когда Интернет только завоевал популярность, дизайнеры, которые привыкли размещать контент в виде сетки, обнаружили, что единственный способ получить такой же результат в браузере - это использовать таблицу. Объединение ячеек привело к созданию сложных макетов веб-сайтов, но это нанесло ущерб доступности и SEO. Перенесемся вперед, и сегодня есть всевозможные способы размещения контента с помощью плавающих элементов, гибких ящиков и т. Д.
CSS3 действительно продвинул возможности Интернета, и с 2014 года появился CSS Grid Layout. В настоящее время он имеет 75-процентную поддержку браузеров, так что наступает момент, когда пора серьезно подумать. Фреймворк Zurb Foundation 6 уже внедрен и использует его для питания своей сети.
В этом руководстве основное внимание будет уделено созданию функции в стиле журнала, которая покажет вам, как улучшить адаптивный веб-дизайн для средних и малых размеров экрана. Другие ресурсы по веб-дизайну можно найти в наших руководствах по лучшим конструкторам веб-сайтов и веб-хостингам.
Загрузите файлы учебных материалов здесь (и сохраните их в безопасном облачном хранилище).
01. Начать
Откройте файл «grid1.html» из начальной папки в файлах проекта. HTML-макет для этого имеет пять тегов div, которые называются просто item1–5 как классы CSS. Это будет контент, помещенный в сетку. Контейнер, оборачивающий это, определит сетку, которая будет иметь четыре столбца.
div> div> элемент 1 / div> div> элемент 2 / div> div> элемент 3 / div> div> элемент 4 / div> div> элемент 5 / div> / div>
02. Проверьте CSS на сетку.
Заглянув в раздел заголовка, вы можете увидеть, что «контейнер» должен быть выложен в виде сетки с автоматической высотой для строк, в то время как столбцы должны быть установлены на четыре, каждый из которых установлен на 25 процентов браузера. . Проверьте это в браузере, и вы увидите, что каждому элементу автоматически назначается следующая доступная позиция в сетке.
.container {дисплей: сетка; сетка-шаблон-строки: авто; сетка-шаблон-столбцы: повтор (4, 25%); }
03. Определите позиции сетки
Теперь взгляните на файл 'grid2.html'. Это то же самое, что и первый файл, за исключением того, что ’item1’ и ’item2’ имеют определенные позиции. Первый расположен в строке 1 и заканчивается перед строкой 2. Столбец начинается с 1 и заканчивается 3, поэтому он охватывает два столбца. Второй начинается в столбце 3 и занимает следующие два столбца. Оставшиеся элементы заполняют следующие доступные ячейки сетки.
.item1 {начало строки сетки: 1; конец ряда сетки: 2; начало столбца сетки: 1; конец столбца сетки: 3; } .item2 {начало строки сетки: 1; конец ряда сетки: 2; начало столбца сетки: 3; конец столбца сетки: 5; }
04. Используйте шаблон сетки.
Откройте 'grid3.html' и посмотрите на текст HTML. Вы увидите, что есть макет с заголовком, боковой панелью, разделом основного содержимого и нижним колонтитулом. Вы можете добавить больше текста в контент, чтобы увидеть, что произойдет, когда он будет помещен внутрь. Сетка будет использовать функцию шаблона, чтобы превратить эти разделы в макет.
div> div> Заголовок / div> div> Боковая панель / div> div> Content / div> div> Нижний колонтитул / div> / div>
05. Определите шаблон
Посмотрите на CSS для контейнера. Он снова определяется как сетка. Верхняя строка будет иметь высоту 200 пикселей, средняя - автоматически, а последняя строка будет иметь высоту 100 пикселей. Ширина столбцов должна составлять 33 процента, а остальные - автоматически. В шаблоне указано, что заголовок заполнит оба столбца. Следующая строка будет боковой панелью в первом столбце и содержимым следующего. Нижний колонтитул проходит через оба.
.container {дисплей: сетка; сетка-шаблон-строки: 200 пикселей автоматически 100 пикселей; сетка-шаблон-столбцы: 33% автоматически; grid-template-sizes: «заголовок заголовка» «содержимое боковой панели» «нижний колонтитул нижнего колонтитула»; }
06. Свяжите шаблон с классом.
Чтобы связать класс с шаблоном, показанный здесь код определяет это. Каждой области сетки присваивается имя, и создается ссылка. Контент здесь не отображается, но находится в документе 'grid3.html'. Посмотрите на это в браузере, чтобы увидеть макет сетки. Поскольку определены два столбца, шаблону необходимо две области в каждой из кавычек.
.header {область сетки: заголовок; } .sidebar {область сетки: боковая панель; }. нижний колонтитул {область сетки: нижний колонтитул; }
07. Сделайте его отзывчивым
Чтобы сделать 'grid3.html' адаптивным, вставляется медиа-запрос, и верхняя строка сохраняется на уровне 200 процентов, а размер остальных строк будет автоматически изменен. Есть только один столбец, полной ширины, поэтому в шаблоне есть одно слово в каждой кавычке для определения макета. Их можно легко изменить, не меняя HTML.
@media screen и (max-width: 699px) {.container {display: grid; сетка-шаблон-строки: 200 пикселей автоматически; сетка-шаблон-столбцы: 100%; сетка-шаблон-области: «заголовок» «боковая панель» «содержимое» «нижний колонтитул»; }}
08. Работа над настоящим макетом.
Теперь откройте ’index.html’ - весь HTML для содержания уже создан, как и некоторые CSS для элементов дизайна. Добавьте эту сетку к тегам стилей в разделе заголовка. При этом создается сетка из трех столбцов с шаблоном для каждого раздела. Обратите внимание на точку для пустых участков сетки.
.container1 {ширина: 80%; маржа: 0 авто; дисплей: сетка; сетка-шаблон-строки: авто; столбцы сетки-шаблона: 33,3% 33,3% авто; grid-template-sizes: "header header header" ". standfirst standfirst" ".. article1" "focus pullquote pullquote" "article2 article2."; }
09. Свяжите шаблон
Как и на предыдущем шаге, заголовок связывается с шаблоном. Заголовок должен охватывать все три столбца сетки, затем standfirst настраивается на два столбца и пустой столбец слева. Если вы проверите браузер, этот столбец будет заполнен, потому что оставшийся контент автоматически заполняет следующее доступное пространство - однако он не будет этого делать, когда все будет настроено.
.header {область сетки: заголовок; } .standfirst {grid-area: standfirst; }
10. Добавьте следующие области
Теперь первая статья, цитата и изображение в фокусе помещены в дизайн. Цитата и изображение находятся рядом в одной строке. На этом этапе article2 еще не размещен, поэтому он занимает первое доступное место в сетке, которое находится рядом с подставкой.
.article1 {grid-area: article1; } .pullquote {grid-area: pullquote; } .focus {область сетки: фокус; выравнивание текста: центр; }
11. Закончите первую сетку.
Добавление CSS второй статьи позволяет правильно разместить всю первую сетку. Глядя на это в браузере, можно увидеть, что макет работает с фоновым изображением и создает макет, который можно увидеть в журналах, где дизайнер работает с большим фоновым изображением.
.article2 {область сетки: статья2; колонка-пробел: 65 пикселей; количество столбцов: 2; }
12. Добавьте белый фон.
Перед запуском второй сетки вы можете задаться вопросом, зачем нужны две сетки. Причина в том, что эта сетка будет иметь белый фон во всю ширину, поэтому этот CSS будет обертывать вторую сетку. Это должно дать этому разделу ощущение второй страницы в дизайне.
.whitebg {padding: 100px 0; цвет фона: #ddd; }
13. Сделайте вторую сетку.
Вторая сетка проще первой. Есть три столбца с автоматической высотой строк. Контент будет заполнять каждый столбец, поэтому нет необходимости определять области шаблона. Однако при добавлении дизайна планшета необходимо переключиться на два столбца, поэтому требуется перекомпоновка, и имена будут важны.
.container2 {ширина: 80%; маржа: 0 авто; дисплей: сетка; сетка-шаблон-строки: авто; столбцы сетки-шаблона: 33,3% 33,3% авто; сетка-шаблон-области: "img1 img2 article3"; }
14. Добавьте столбцы.
Каждому из классов CSS во второй сетке предлагается установить связь с соответствующим столбцом, как определено в шаблоне сетки. Цвет текста статьи изменен, чтобы он выделялся на более светлом фоне этого раздела. Осталось закончить только нижний колонтитул, поэтому макет журнала почти готов.
.img1 {область сетки: img1; } .img2 {область сетки: img2; } .article3 {grid-area: article3; цвет: # 333; }
15. Улучшите нижнюю часть страницы.
При завершении страницы на экране будет размещен блок div во всю ширину, который будет заполнен черным цветом, а текст будет просто центрирован. Это завершает настольную версию дизайна, но переместите экран вниз ниже 1200 пикселей в ширину, и сайт начнет ломаться.
.footer {цвет фона: # 000; цвет: # 999; выравнивание текста: центр; отступ: 50 пикселей, 20 пикселей, 100 пикселей; }
16. Отрегулируйте для среднего размера экрана.
Сюда вставляется медиа-запрос, чтобы следить за дизайном, когда ширина браузера меньше 1200 пикселей. Код для шагов 17 и 18 будет помещен в скобки, где находится комментарий. Это будет случай изменения структуры макета обеих сеток.
@media screen и (max-width: 1200px) {/ * здесь код * /}
17. Оплавление первой сетки.
Первая сетка настроена на заполнение всей ширины браузера всего двумя столбцами вместо трех. Порядок разделов размещается в шаблоне, статьи меняются сторонами, так как это лучше соответствует фоновому изображению при таком размере экрана.
.container1 {ширина: 100%; сетка-шаблон-строки: авто; сетка-шаблон-столбцы: 50% 50%; grid-template-sizes: "header header" "standfirst standfirst" "article1." "pullquote pullquote" "article2 focus"; } .article2 {количество столбцов: 1; }
18. Протестируйте свой макет.
Размер второй сетки также изменяется, чтобы занять всю ширину браузера, и добавлены два столбца. Изображения размещаются бок о бок в строке над текстом, так что они аккуратно помещаются на дисплее. Вы можете протестировать этот макет в браузере, изменив его размер ниже 1200 пикселей.
.container2 {ширина: 100%; маржа: 0 авто; сетка-шаблон-строки: авто; сетка-шаблон-столбцы: 50% 50%; сетка-шаблон-области: "img1 img2" "article3 article3"; }
19. Настройте дизайн для мобильных устройств.
Любой браузер с шириной менее 769 пикселей получит код, добавленный на последних шагах. Все, что нам нужно здесь сделать, это убедиться, что каждая из сеток имеет макет с одним столбцом, чтобы контент можно было правильно просматривать в меньшем пространстве.
@media screen и (max-width: 768px) {/ * здесь код заключительных шагов * /}
20. Проверьте сетку в один столбец.
Теперь первая сетка настроена на один столбец, занимающий 100% ширины браузера, а порядок разделов добавлен в области шаблона. Проверьте, как работает первая часть страницы на экранах мобильных устройств.
.container1 {ширина: 100%; сетка-шаблон-строки: авто; сетка-шаблон-столбцы: 100%; сетка-шаблон-области: "заголовок" "стоять первым" "статья1" "цитата" "фокус" "статья2"; }
21. Завершите макет.
Здесь вторая сетка также заполняет один столбец и определяется расположение разделов. Теперь сохраните готовый дизайн и просмотрите его на экранах разного размера, чтобы увидеть все возможности макета CSS Grid и насколько легко было просто изменить порядок содержимого для разной ширины.
.container2 {ширина: 100%; маржа: 0 авто; сетка-шаблон-строки: авто; сетка-шаблон-столбцы: 100%; сетка-шаблон-области: "img1" "img2" "article3"; }
Эта статья изначально была опубликована в журнале о креативном веб-дизайне Web Designer. КупитьВыпуск 271или жеподписываться.
