Подобно графическим дизайнерам, которых я ранее порицал за то, что они не принимают во внимание разные области просмотра, я начал создавать графический макет на основе фиксированной сетки шириной 960 пикселов. В действительности, несмотря на то что теоретически всегда лучше начинать создание дизайна, задумываясь о взаимодействии, которое будет обеспечиваться для пользователей мобильных или имеющих небольшой экран устройств, и уже оттуда строить все дальше, пройдет еще несколько лет, пока все осознают преимущества такого мышления. А до тех пор вам, скорее всего, придется брать существующие настольные дизайны и модифицировать их, чтобы сделать адаптивными. Поскольку такое положение вещей, вероятно, сохранится в обозримом будущем, мы начнем наш процесс с дизайна с фиксированной шириной. На рисунке 2.1 показано, как выглядит его незавершенный макет.
Если проанализировать макет, то можно понять, что он обладает весьма простой и распространенной структурой: верхний колонтитул, навигация, врезка, содержимое и нижний колонтитул. Вероятно, именно такого рода структуру вас постоянно просят создавать заказчики.
Макет дизайна с фиксированной шириной
В главе 4 я расскажу, почему вам следует писать разметку на HTML5. Однако пока мы не будем касаться этого вопроса, поскольку пора реализовать на практике наши новые познания о медиазапросах. Итак, сначала попробуем свои силы в применении медиазапросов, используя старую добрую HTML4-разметку. Без содержимого разметка структуры на HTML4 будет выглядеть следующим образом:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>And the winner isn’t</title>
<link href="css/main. css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<!— верхний колонтитул и навигация —>
<div id="header">
<div id="navigation">
<ul>
<li><a href="#">Навигация1</a></li> <li><a href="#">HaBM2</a></li>
</ul>
</div>
</div>
<!— врезка —>
<div id="sidebar">
>Это Bpe3Ka</p>
</div>
<!— содержимое —>
<div id="content">
<р>Это содержимое</р>
</div>
<!— нижний колонтитул —>
<div id="footer">
<р>Это нижний колонтитул</р>
</div>
</div>
</body>
</html>
Если открыть проектный файл в Photoshop, то можно увидеть, что верхний и нижний колонтитулы имеют ширину 940 пикселов (с 10-пиксельными полями по бокам), а врезка и содержимое занимают по ширине соответственно 220 и 700 пикселов и имеют 10-пиксельные поля по бокам (рисунок 2.2).
Сначала позаботимся о наших структурных блоках (header, navigation, sidebar, content и footer), используя для этого CSS. После вставки стилей сброса наш суперклассный (шутка!) CSS-код для страницы будет выглядеть следующим образом:
#wrapper { margin-right: auto; margin-left: auto; width: 960px;
}
#header { margin-right: 10px; margin-left: 10px; width: 940px;
Background-color: #779307;
}
#navigation ul li { display: inline-block;
}
#sidebar { margin-right: 10px; margin-left: 10px; float: left;
Background-color: #fe9c00;
Width: 220px;
}
#content { margin-right: 10px; float: right; margin-left: 10px; width: 700px;
Background-color: #dedede;
}
#footer { margin-right: 10px; margin-left: 10px; clear: both;
Background-color: #663300; width: 940px;
}
Проектный файл, открытый в Photoshop
Чтобы наглядно показать, как работает структура, помимо дополнительного содержимого (без изображений), я добавил фоновый цвет для каждого структурного раздела.
ПРИМЕЧАНИЕ
Стили сброса — это набор общих CSS-объявлений, которые сбрасывают разнообразные стили, установленные по умолчанию и используемые браузерами для обработки HTML-элементов. Они добавляются в начало основного CSS-файла для сброса стилей каждого браузера, создавая тем самым равные условия, чтобы стили, добавляемые в таблицу стилей позднее, действовали аналогичным образом в отличающихся браузерах. Не существует «идеального» набора стилей сброса, и у разработчиков имеются собственные варианты такого набора. Стили сброса, которые я использую в HTML4-документах, представляют собой комбинацию оригинальных решений Эрика Мейера (Eric Meyer) (http://meyerweb.com/eric/tools/css/reset/) и комплекта персональных предпочтений и трюков, о которых я узнал, изучая код, написанный другими невероятно умными людьми, например Дэном Седерхольмом (Dan Cederholm) (http://simplebits.com). Если вы пока еще не используете стили сброса, то добавьте стили, разработанные Эриком Мейером. Как мне кажется, существуют оптимальные отправные точки для HTML5-документов, например normalize. css (http://necolas. github.com/normalize. css/), и мы взглянем на них в главе 4.
На рисунке 2.3 показано, как базовая структура будет выглядеть в браузере с областью просмотра шире 960 пикселов.
Основа сайта в браузере с областью просмотра шире 960 пикселов
Существует множество других способов обеспечения аналогичной фиксированной структуры содержимого слева/справа с использованием CSS. У вас, несомненно, появятся собственные предпочтения в этом плане. Однако для любого из этих способов неизменным будет следующее: по мере уменьшения ширины области просмотра до менее чем 960 пикселов области содержимого справа начнут обрезаться.
Добавить комментарий