Когда Collis запустил этот сайт и спросил читателей о запросах на учебное пособие, один из них был для «журнальных тем» для блогов. В этом уроке основное внимание уделяется первой части процесса: применение сетки CSS к дизайну для прототипа шаблона домашней страницы.
Вы можете увидеть демонстрацию этого руководства, нажав кнопку «Демо», ниже. Для источника загрузка ZIP-файла не включает код Blueprint CSS.
Здесь основное внимание уделяется примеру дизайна веб-страницы с использованием структуры сетки Blueprint CSS, основанной на моей предыдущей статье. Однако вы можете применить один и тот же процесс к любой структуре сетки CSS, которую вы предпочитаете. Если вам не нравится использование grid-структур на производственных сайтах, вы всегда можете заменить код CSS и соответствующие классы HTML своим собственным.
Дизайн страницы, показанный ниже, зависит от многочисленных тем журнала WordPress, поэтому вы можете видеть знакомые элементы дизайна, хотя это не учебник, специфичный для WP.
Позвольте мне отметить, что я всего лишь «кресло», самонаводящийся дизайнер, и минималистский характер моего дизайна отразит мою недостаточную подготовку. Надеюсь, это позволит вам сосредоточиться на общем дизайне сетки и процессе кодирования, который основан на геометрических элементах, а не на стиле.
Типичный процесс проектирования для веб-страниц - начать с эскиза на бумаге, а затем графический макет в Photoshop или Fireworks и т. Д. Отбросьте все элементы дизайна, расположенные примерно там, где вы хотите. Позже, на этапе проектирования на основе CSS, вы определите точные измерения.)
FilmPundits - это сайт, принадлежащий другу, которого я собираю. Макет ниже - один из нескольких проектов FilmScenic, которые я прототипировал. Тема фильма просто поддается этому примеру из-за широкоэкранных изображений.
Если вы хотите использовать подобный дизайн для не-фильмов, просто настройте высоту изображения, чтобы они выглядели менее широкоэкранными. Для моих потребностей в дизайне самое большое изображение должно иметь наибольшее влияние. Таким образом, композиция расположена слегка не по центру, горизонтально. Это делает всю страницу более динамичной и привлекает внимание к самым важным элементам.
Давайте посмотрим на строки «руководства» ниже, которые образуют сетку проектирования для макета выше.
Используйте свое любимое графическое программное обеспечение, чтобы превратить направляющие линии в карту «среза»:
Если вы не используете сетку CSS, вы либо вручную назовете свою веб-страницу, либо файл CSS в этот момент, или пусть ваше программное обеспечение будет генерировать код для вас.
Теперь, когда у нас есть макет графического дизайна, нам нужно перевести его в HTML и CSS-код. Чтобы повторить, использование структуры сетки CSS ускоряет процесс прототипирования. Вы можете измерить элементы дизайна в ширинах и тонкости пикселей в соответствии с используемой вами сеткой CSS. (Я не сильно встраиваюсь в вертикальное позиционирование, потому что я стараюсь контролировать это с высотами изображения и верхним краем.)
Вот такой процесс, который я обычно использую для применения сеток CSS, который рассматривает макет графического дизайна как отложенный. Вам нужно будет отрегулировать это в соответствии с вашими потребностями.
Если вы настоящий дизайнер, в отличие от меня, вы, вероятно, сделаете большую часть макета дизайна в своем любимом пакете редактирования графики. Обычно я предпочитаю рисовать на бумаге, а затем макет на лету с использованием HTML и CSS (как Blueprint, так и пользовательских классов), как описано ниже.
Теперь, когда у вас есть макет макета страницы, вы можете начать кодирование в HTML и CSS. Вот приблизительный процесс фактических шагов кодирования:
Чтобы сделать вышеописанные процессы более понятными, давайте взглянем на некоторые фактические фрагменты кода HTML и CSS для примера дизайна сайта фильма, изображенного ранее. Имейте в виду, что я стал экстремальным с тегами div без Blueprint исключительно для ясности в этом уроке. Вы, вероятно, захотите вычеркнуть любые лишние классы, возможно, слейте вложенные теги div.
Также обратите внимание, что я использовал некоторые «уродливые» имена классов CSS без Blueprint для ясности. Им все предшествует «fs-», за которым следует функциональное имя, чтобы было ясно, для чего я их использую.
Я закодировал пять этапов этого урока, чтобы проиллюстрировать процесс уточнения в HTML и CSS. Обычно я сжимал этап 1-3.
Эти шаги будут более ясными в следующих разделах.
Чтобы начать с, мы хотим настроить HTML-файл:
<html ... ?>
<head ... >
<title>FilmScenic Template</title>
<!-- Framework CSS -->
<link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print">
<!--[if IE]>
<link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection">
<![endif]-->
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection">
</head>
<body>
<div class="container showgrid"> <!-- showgrid -->
header, content, sidebar, and footer go here
</div>
</body>
</html>Теперь грубо заблокируйте всю страницу (контейнер) в три раздела, контролируемые CSS: fs-mainblock, fs-sidebar и fs-footer. Вы можете увидеть это в HTML-коде ниже, который заполняет некоторые элементы div.container, которые мы вводили ранее:
<div class="container showgrid"> <!-- showgrid -->
<div class="fs-content">
<div class="fs-mainblock span-18 colborder">header, content blocks go here</div>
<div class="fs-sidebar span-5 last">sidebar</div>
</div><!-- end: fs-content -->
<div class="clear"></div>
<div class="fs-footer span-24">
<p>(c) Copyright 2008-present, This blog</p>
</div>
<br/>
</div>Вы заметите, что вышеприведенные divs используют как пользовательские классы, так и классы Blueprint (span-18, colborder, span-5, last, span-24). «Последний» класс очень важен, в противном случае поле справа по умолчанию для раздела fs-sidebar не будет отключено, и раздел будет отображаться ниже секции fs-mainblock вместо него. Colborder рисует вертикальную линию между fs-mainblock и fs-sidebar и берет столбец сам по себе. Это не отражается в значении «span-18». Теоретически основной блок фактически занимает 19 столбцов (19 + 5 = 24 столбца, по умолчанию Blueprint).
Теперь мы добавляем классы в пользовательскую таблицу стилей для этих трех блоков (см. Ниже). Примечание: некоторые из них являются временными, чтобы продемонстрировать прямоугольники блоков на экране при уточнении дизайна. Проконсультируйтесь с окончательным файлом style.css, а не с использованием правил, приведенных ниже в CSS-фрагментах.
div.fs-content {
margin-bottom: 20px;
}
div.fs-mainblock {
height: 700px;
background: #ccc;
}
div.fs-sidebar {
height: 700px;
background: #ccc;
}
div.fs-footer {
margin-top: 20px;
padding-top: 5px;
height: 30px;
background: #ccc;
border-top: 1px solid #000;
}CSS выше приводит к грубому макету ниже:
Давайте уточним дизайн далее, разделив разделы. Класс div fs-mainblock делится на разделы fs-header и fs-featured. Fs-sidebar разделен на fs-recentposts и fs-newsbox. Вот уточненный div.container:
<div class="container showgrid"> <!-- showgrid -->
<div class="fs-content">
<div class="fs-mainblock span-18 colborder"><!-- s: fs-mainblock -->
<div class="fs-header">Logo + menu</div>
<div class="fs-featured">Featured sections</div>
</div><!-- e: fs-mainblock -->
<div class="fs-sidebar span-5 last"><!-- s: fs-sidebar -->
<div class="fs-recentposts">
Recent posts
</div>
<br/>
<div class="fs-newsbox"><!-- s: fs-newsbox -->
News
</div><!-- e: fs-newsbox -->
</div><!-- e: fs-sidebar -->
</div><!-- end: fs-content -->
<div class="clear"></div>
<div class="fs-footer">
<p>(c) Copyright 2008-present, This blog</p>
</div>
<br/>
</div>Как и прежде, классы для новых разделов добавляются в пользовательскую таблицу стилей style.css. Высота каждого раздела при необходимости аппроксимируется, и мы снова добавляем временный фон для некоторых элементов, которые будут удалены в окончательном файле style.css. Вот некоторые дополнительные правила CSS:
div.fs-header {
//Logo + menu
width: 710px;
height: 110px;
background: #ccc;
margin-bottom: 10px;
}
div.fs-featured {
// Featured sections
width: 710px;
height: 580px;
background: #ccc;
margin-bottom: 10px;
}
div.fs-sidebar div.fs-recentposts {
height: 370px;
background: #ccc;
margin-bottom: 10px;
}
div.fs-sidebar div.fs-newsbox {
height: 270px;
background: #ccc;
}Это приводит к следующему макету:
Это заключительный этап процесса макета. Мы добавляем разделы для всех остальных элементов дизайна:
Вот как выглядит наш div.container:
<div class="container"> <!-- showgrid -->
<div class="fs-content">
<div class="fs-mainblock span-18 colborder"><!-- s: fs-mainblock -->
<div class="fs-header"><!-- s: fs-header -->
<div class="fs-logo">Logo</div>
<div class="fs-horiznav">Menu</div>
</div><!-- e: fs-header -->
<div class="fs-featured"><!-- s: fs-featured -->
<div class="fs-txt-featured span-3">Featured</div>
<div class="fs-features span-15 last">
<div class="fs-bigfeature">big feature</div>
<div class="fs-smfeatures"><!-- s: fs-smfeatures -->
<div class="span-5">sm feature</div>
<div class="span-5">sm feature</div>
<div class="span-5 last">sm feature</div>
</div><!-- e: fs-smfeatures -->
</div>
</div><!-- e: fs-featured -->
<div class="clear"></div>
</div><!-- e: fs-mainblock -->
<div class="fs-sidebar span-5 last"><!-- s: fs-sidebar -->
<div class="fs-recentposts">
Recent posts
<div class="fs-recentpost">recent post</div>
<div class="fs-recentpost">recent post</div>
<div class="fs-recentpost">recent post</div>
<div class="fs-recentpost">recent post</div>
<div class="fs-recentpost">recent post</div>
</div>
<br/>
<div class="fs-newsbox"><!-- s: fs-newsbox -->
News
</div><!-- e: fs-newsbox -->
</div><!-- e: fs-sidebar -->
</div><!-- end: fs-content -->
<div class="clear"></div>
<div class="fs-footer">
<p>(c) Copyright 2008-present, This blog</p>
</div>
<br/>
</div>Как вы можете видеть, существует много вложенных divs. Некоторые из них просто для ясности в этом уроке. В остальном на производственной площадке вы можете скомпоновать некоторые из них или заменить классы Blueprint своими собственными. Некоторые люди предпочитают использовать кеширование на своих сайтах при использовании «журнальных» тем с сеткой - хотя это не подходит для этого урока.
Каждый новый класс добавляется в пользовательскую таблицу стилей с временными высотами и фоном:
div.fs-logo {
/* Site logo */
height: 90px;
width: 400px;
background: #999;
margin-bottom: 10px;
}
div.fs-horiznav {
/* Horizontal menu */
height: 25px;
width: 710px;
background: #999;
margin-bottom: 10px;
}
div.fs-featured {
/* Featured sections */
width: 710px;
height: 580px;
background: #ccc;
margin-top: 10px;
margin-bottom: 10px;
}
div.fs-txt-featured {
/* Featured */
height: 30px;
width: 110px;
background: #999;
}
div.fs-features {
/* Features */
height: 570px;
width: 590px;
background: #999;
}
div.fs-bigfeature {
/* Big feature */
height: 260px;
width: 590px;
background: #666;
margin-bottom: 20px;
}
div.fs-smfeatures div{
/* Small feature */
height: 280px;
background: #666;
margin-bottom: 10px;
}
div.fs-recentpost {
/* Individual recent post. Height is actually variable, but is a minimum of 49 px */
height: 50px; // Roughly
width: 190px;
background: #999;
margin-bottom: 10px;
}Это приводит к заключительной стадии макета, которая довольно близка по геометрии к нашему «нарезанному» графическому макету дизайна:
Теперь мы готовы подготовить окончательный код.
Это последний шаг в процессе кодирования, когда мы бросаем в фактические элементы дизайна, очищаем лишние div и классы и избавляемся от любых «блокирующих» элементов:
Теперь у нас есть наш окончательный дизайн ниже, который совпадает с вершиной этого руководства:
В окончательных файлах нет ни одного из элементов, заблокированных серой, и в файле style.css есть дополнительные подробные комментарии, которые помогут вам расшифровать назначение каждого настраиваемого класса. ZIP-файл включает изображения, обрезанные из различных плакатов фильма, которые являются авторскими правами их соответствующих владельцев. Файлы сетки CSS Blueprint не включены в ZIP-файл.
Обратите внимание, что между исходными файлами и кодом, представленным выше, могут существовать некоторые незначительные расхождения.
Некоторые заключительные комментарии к примеру в этом учебном пособии:
Это не сложный пример, ни полная тема для платформы блога, но я надеюсь, что это поможет вам понять, как использовать сетки CSS для дизайна веб-страниц. Хотя здесь код для статической страницы, следующим шагом является интеграция с платформой блога для создания шаблона домашней страницы.