Фрагменты дизайна в виде фотографий без фона или на белом фоне помещаются в отдельную папку, отдельная папка помещается в папку с файлами html и css. Файлы создаются в программе для вёрстки сайтов, например, Visual Studio Code.
Если заполнить шаблонами файл, созданный в текстовом редакторе - файл зависнет и перестанет открываться. В файл html копируются строчки, нужные для того чтобы страница открывалась в браузере:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="название файла html.css">
</head>
<body>
</body>
</html>
Между тегами <body> и </body> печатается
<div class="grid1">
<img src="название папки с шаблонами/название фрагмента дизайна.формат изображения" width="количество пикселей" heaght="количество пикселей" alt="альтернативный текст изображения">
</div>
Мои шаблоны-бабочки в файле html выглядят так:
<div class="grid1">
<img src="images/жёлто-зелёная бабочка.png" width="24px" heaght="22px" alt="жёлто-зелёная бабочка">
</div>, а файл css так:
div {
background-color: rgb(237, 247, 255);
border: 1px solid #948d8f;
padding: 12px;
padding-left: 6px;
margin: 1px;
}
.grid1 {
display: grid;
grid-template-columns: repeat(21, 19px);
grid-template-rows: repeat(1, 18px);
grid-gap: 14px
}
Сколько шаблонов помещается на одной строке листа А4, видно в окошке
предварительного просмотра печати, для того чтобы их сверстать, в файле html должно быть столько строчек между тегами
<body>
и
</body>
Нужные расстояния между картинками определяются наугад и на глаз в стилях
.grid { }, цифры стилей для каждой строчки шаблонов (.grid1, .grid2, .grid3) добавляются, чтобы не запутаться в строчках-рядах. Если одинаковые шаблоны
нужно расположить в два ряда - цифра 1 в строке grid-template-rows: repeat меняется на цифру 2, а количество строчек-пути к шаблону в файле html печатается вдвое больше.
В моём файле css, в первом ряду, указана двадцать одна бабочка и в файле html напечатана двадцать одна строчка-путь к шаблону, а если я захочу получить сорок два одинаковых шаблона - в файле css останется цифра 21, а в файле html я скопирую двадцать одну строчку-путь к фрагменту ногтевого дизайна и вставлю их через пустую строчку, чтобы было удобнее находить.
Вёрстка шаблонов закончена, осталось распечатать их на офисной бумаге и превратить в переводные наклейки.