Макет сайта
4 мая 2022Чтобы получить подробное представление о вёрстке на HTML5 пройдем весь процесс работы, начиная с получения графического макета и заканчивая публикацией сайта. В качестве примера сверстаем страницы сайта lionindesert.ru представленные на рис. 6.1.
а. Главная страница сайта
б. Внутренняя страница
Рис. 6.1. Макеты сайта lionindesert.ru
Дизайнер подготовил макеты в программе Adobe Illustrator и одновременно экспортировал их в формат PSD (Adobe Photoshop), так что все необходимые начальные изображения у нас имеются. Здесь надо учесть, что вёрстка это процесс творческий и возможно несколько решений одной задачи, поэтому с графикой придётся работать активно, готовя изображения под своё решение. Один большой PSD-файл надо превратить в набор небольших рисунков, которые будут выводиться в браузере с использованием HTML и CSS. Предполагаем, что верстальщик владеет программой Photoshop и может в ней выполнить какие-то типовые действия вроде вырезания фрагмента картинки и сохранения его в подходящем для веба формате. Либо верстальщик работает в паре с дизайнером и чётко указывает ему, что надо получить.
Для систематизации работы разобьём её на ряд задач по виду макета (рис. 6.2). Но и так хорошо заметно, что страница делится на три главные группы: шапка, основная часть, где располагается весь контент и подвал. «Шапка» и «подвал» это жаргонные выражения для обозначения заголовка страницы и её нижней части. Также применяются термины «хедер» и «футер», являющиеся калькой с английских слов header и footer.
Рис. 6.2. Задачи для вёрстки
Макет комбинированный, шапка и подвал занимают всю ширину веб-страницы, а основная часть имеет фиксированную ширину 760 пикселов.
Верхняя часть кода для всех страниц будет идентичной, за исключением тега <title>, он определяет заголовок страницы.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Как поймать льва в пустыне?</title> <link rel="stylesheet" href="lion.css"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head>
Сайт