Макет сайта

02.08.2011

Влад Мержевич

Чтобы получить подробное представление о вёрстке на 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>

Attachment	Size
lionindesert.zip (33.4 KB)	33.4 KB