Не пугайтесь, но наш дизайн имеет фиксированную ширину

Подобно графическим дизайнерам, которых я ранее порицал за то, что они не принимают во внимание разные области просмотра, я начал создавать графический макет на основе фиксированной сетки шириной 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 пикселов области содержимого справа начнут обрезаться.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *