Прототип шаблона домашней страницы в стиле журнала с помощью CSS-схемы Blueprint

18 января 2018

Когда Collis запустил этот сайт и спросил читателей о запросах на учебное пособие, один из них был для «журнальных тем» для блогов. В этом уроке основное внимание уделяется первой части процесса: применение сетки CSS к дизайну для прототипа шаблона домашней страницы.

Демо и источник

Вы можете увидеть демонстрацию этого руководства, нажав кнопку «Демо», ниже. Для источника загрузка ZIP-файла не включает код Blueprint CSS.

Что мы строим

Здесь основное внимание уделяется примеру дизайна веб-страницы с использованием структуры сетки Blueprint CSS, основанной на моей предыдущей статье. Однако вы можете применить один и тот же процесс к любой структуре сетки CSS, которую вы предпочитаете. Если вам не нравится использование grid-структур на производственных сайтах, вы всегда можете заменить код CSS и соответствующие классы HTML своим собственным.

Дизайн страницы, показанный ниже, зависит от многочисленных тем журнала WordPress, поэтому вы можете видеть знакомые элементы дизайна, хотя это не учебник, специфичный для WP.

Типичный процесс графического дизайна

Позвольте мне отметить, что я всего лишь «кресло», самонаводящийся дизайнер, и минималистский характер моего дизайна отразит мою недостаточную подготовку. Надеюсь, это позволит вам сосредоточиться на общем дизайне сетки и процессе кодирования, который основан на геометрических элементах, а не на стиле.

Типичный процесс проектирования для веб-страниц - начать с эскиза на бумаге, а затем графический макет в Photoshop или Fireworks и т. Д. Отбросьте все элементы дизайна, расположенные примерно там, где вы хотите. Позже, на этапе проектирования на основе CSS, вы определите точные измерения.)

FilmPundits - это сайт, принадлежащий другу, которого я собираю. Макет ниже - один из нескольких проектов FilmScenic, которые я прототипировал. Тема фильма просто поддается этому примеру из-за широкоэкранных изображений.

Если вы хотите использовать подобный дизайн для не-фильмов, просто настройте высоту изображения, чтобы они выглядели менее широкоэкранными. Для моих потребностей в дизайне самое большое изображение должно иметь наибольшее влияние. Таким образом, композиция расположена слегка не по центру, горизонтально. Это делает всю страницу более динамичной и привлекает внимание к самым важным элементам.

Давайте посмотрим на строки «руководства» ниже, которые образуют сетку проектирования для макета выше.

Используйте свое любимое графическое программное обеспечение, чтобы превратить направляющие линии в карту «среза»:

Если вы не используете сетку CSS, вы либо вручную назовете свою веб-страницу, либо файл CSS в этот момент, или пусть ваше программное обеспечение будет генерировать код для вас.

Процесс проектирования на основе сетки CSS

Теперь, когда у нас есть макет графического дизайна, нам нужно перевести его в HTML и CSS-код. Чтобы повторить, использование структуры сетки CSS ускоряет процесс прототипирования. Вы можете измерить элементы дизайна в ширинах и тонкости пикселей в соответствии с используемой вами сеткой CSS. (Я не сильно встраиваюсь в вертикальное позиционирование, потому что я стараюсь контролировать это с высотами изображения и верхним краем.)

Вот такой процесс, который я обычно использую для применения сеток CSS, который рассматривает макет графического дизайна как отложенный. Вам нужно будет отрегулировать это в соответствии с вашими потребностями.

    На листе бумаги нарисуйте ограничивающий прямоугольник - пейзаж или портрет - представляющий общую форму вашего дизайна страницы. Разделите ограничивающий прямоугольник на грубые разделы: header, footer, main content, sidebar. При необходимости разделите грубые участки. Выберите структуру сетки CSS, будь то предварительно построенная или обычная. Я использую Blueprint. Вы можете использовать этот одностраничный PDF-документ как «лист обмана». Определите максимальную ширину страницы. Я использовал ширину страницы по умолчанию для экрана Blueprint размером 950 пикселей, которая состоит из 24 столбцов по 30 пикселей в ширину и 10 пикселей в ширину между колоннами (24x30 - 10 = 950 px). Выделите свой дизайн в растровом графическом программном обеспечении (Photoshop, Fireworks и т. Д.), Если хотите. Я склонен пропустить этот шаг, потому что. Обратите внимание, что большинство инфраструктур сетки CSS включают в себя сетку PNG или JPG, которую вы можете наложить в качестве руководства. Я не использовал эту сетку в процессе графического дизайна, о котором говорилось выше. Решите минимальную ширину для различных разделов. Я хотел, чтобы боковая панель была шириной не менее 190 пикселей (5 столбцов Blueprint), но оставила ее до последнего, чтобы гарантировать, что три небольших блока функций внизу слева имеют приоритет. Левая часть блока «features» должна иметь справедливый бит пробела (> = 30 px, так как это ширина одного столбца в Blueprint). После слияния с разделами с более высоким приоритетом я обосновался на 3 столбцах = 110 пикселей в ширину. Три небольших блока функций должны быть одинаковой ширины. Все, что меньше 190 пикселей в ширину, не будет иметь такого же визуального воздействия. Все, что больше 190 пикселей, не оставляло достаточно места для белого пространства слева. (Если бы у меня было время и наклон, я мог бы создать пользовательскую структуру Blueprint, которая обеспечивала бы более точный контроль или вообще использовала бы большую страницу ширины). Ширина большого изображения функции (590 пикселей = 15 столбцов) автоматически определяется, так как она должен охватывать ширину всех трех меньших функциональных блоков. Его отношение ширины высоты больше, чем для более мелких изображений функций, для визуального воздействия и, таким образом, для обозначения того, что оно «более важно», чем другие элементы страницы. Все эти изображения придают широкоэкранную привлекательность, несмотря на разные соотношения ширины. В разделе «Последние сообщения» боковой панели ширина изображения принудительно составляет 70 пикселей (2 столбца) - вместо моих желаемых больших 48x48 палец - в результате чего сохраняется экран горизонтального экрана. (Вот где структура сетки CSS может быть ответственностью: принудительные размеры.) В конце концов, даже маленькие миниатюры слегка намекают на «широкоэкранную» тему. Любые текстовые блоки, которые являются слишком широкими, могут быть легко исправлены с использованием меньшего шрифта - предпочтительно с использованием семейства шрифтов, которое все еще доступно для чтения при уменьшенном размере. Определите высоты элементов, где это возможно. Удовлетворение предпочтений по высоте имеет меньшее значение для меня, но я минимизировал размещение элементов дизайна по вертикали, так что общий дизайн страницы отражает «широкоэкранное» ощущение. По крайней мере, для этого шаблона домашней страницы я не хотел, чтобы высота страницы была такой большой, что большинство читателей пришлось бы прокручивать вниз. Это разрушит «широкоэкранный» эффект. Меню является только заполнителем и не рассматривается здесь в коде. Он охватывает всю «контентную» ширину 710 пикселей (18 колос). Макет большого изображения был определен макетом. Его пропорции должны напоминать «широкий экран ». Небольшие изображения функций - это уменьшенная версия тех, которые я использую на другом сайте фильма. Оригиналы составляют 470 wx 175 ч. Поскольку для работы имеется только 190 пикселей в ширину, масштабирование исходного изображения делает полученную высоту 71 px, который я обрезал здесь до 70 пикселей. Полученная пропорция по-прежнему дает широкоэкранное ощущение, но повторяет тот факт, что эти блоки не так важны, как изображение большой функции. Высота текста каждой небольшой секции функций определяется формулой четыре вертикальных раздела: название фильма, дата публикации, пост-автор и описание, а также несколько «нижних границ». (В CSS-коде позже вы увидите, что высота строки по умолчанию составляет 115%.) Высота элементов в блок Recent Posts - это минимум 49 пикселей, хотя они являются переменными в зависимости от длины заголовка сообщения. Верх раздела новостей не совсем подходит к вершине небольших функций. Я не рассматривал это здесь. Определите конечные ширины каждого элемента, f действуя в настройках вашей сетки. Вы можете использовать бумажный эскиз или графический макет в качестве помощи. Нарисуйте свой графический макет, если вы его используете, и сохраните сегменты в файлы изображений. Добавьте необходимые теги div и атрибуты класса Blueprint для поддержки вашего дизайна. Испытайте и настройте, пока не получите окончательный дизайн, которым вы довольны. Если хотите, разделите рамки Blueprint. Это означает замену явной структуры (HTML, CSS) на неявный, что для меня звучит как много ненужной работы (но это только я). По крайней мере, в производстве используйте «сжатую» версию файлов Blueprint. Иди вживую.

Если вы настоящий дизайнер, в отличие от меня, вы, вероятно, сделаете большую часть макета дизайна в своем любимом пакете редактирования графики. Обычно я предпочитаю рисовать на бумаге, а затем макет на лету с использованием HTML и CSS (как Blueprint, так и пользовательских классов), как описано ниже.

Процесс кодирования на основе грида

Теперь, когда у вас есть макет макета страницы, вы можете начать кодирование в HTML и CSS. Вот приблизительный процесс фактических шагов кодирования:

    Включить необходимые ссылки CSS и IE-код в элемент заголовка вашей веб-страницы. В теге body начните с div, чей атрибут класса установлен в «контейнер». Это код Blueprint для указания области контейнера для элементов дизайна. Это отключает всю страницу. Если вы хотите, чтобы сетка была видимой, чтобы помочь вам правильно разместить элементы, добавьте значение «showgrid» в атрибут класса этого div. Начните очищать блоки в более мелкие разделы, используя содержимое HTML, обернутое в теги div, а также прямоугольники с контролем CSS для изображений. Чтобы указать ширину, используйте классы «span-x» Blueprint. Добавьте в какие-либо пользовательские классы CSS, которые вам нужны. Обычно я добавляю избыточные пользовательские блоки (с серым фоном), а затем удаляю их после того, как у меня есть реальный дизайн, реализованный в коде. Вы можете продолжить уточнение каждого грубого блока или перейти к следующему шагу. Создайте все необходимые логотипы, значки или баннеры, которые ранее не были созданы. Замените грубые блоки фактическими элементами дизайна. Добавьте соответствующие теги div, любые оставшиеся значения класса Blueprint.

Пример HTML и CSS-кода

Чтобы сделать вышеописанные процессы более понятными, давайте взглянем на некоторые фактические фрагменты кода HTML и CSS для примера дизайна сайта фильма, изображенного ранее. Имейте в виду, что я стал экстремальным с тегами div без Blueprint исключительно для ясности в этом уроке. Вы, вероятно, захотите вычеркнуть любые лишние классы, возможно, слейте вложенные теги div.

Также обратите внимание, что я использовал некоторые «уродливые» имена классов CSS без Blueprint для ясности. Им все предшествует «fs-», за которым следует функциональное имя, чтобы было ясно, для чего я их использую.

Я закодировал пять этапов этого урока, чтобы проиллюстрировать процесс уточнения в HTML и CSS. Обычно я сжимал этап 1-3.

    Пустой шаблон с базовым классом «контейнер» и пустой файл CSS. Шероховатая блокировка 1. Грубая блокировка этап 2. Уточните шероховатые блоки со стадии 1. Шероховатая ступень блокировки 3. Завершение окончательного блока в необходимые секции. Окончательная веб-страница и CSS.

Эти шаги будут более ясными в следующих разделах.

Шаг 1: Пустой код шаблона

Чтобы начать с, мы хотим настроить 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. Если вы используете другую структуру каталогов, не забудьте изменить URL соответственно. Я поместил каталог «blueprint» ниже файла index.html, хотя в процессе производства он, вероятно, должен «превышать» ваш каталог тем. Ссылка на пользовательский «стиль» CSS-файл, который будет содержать все классы CSS, отличные от Blueprint. На этом этапе это style.css. Настройте div с классами «container» и «showgrid», обе части Blueprint. Использование класса showgrid будет отображать сетку, которую мы используем, чтобы было легче увидеть, что элементы дизайна размещаются правильно.

Шаг 2: Неверная блокировка Этап 1

Теперь грубо заблокируйте всю страницу (контейнер) в три раздела, контролируемые 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 выше приводит к грубому макету ниже:

Шаг 3: Неверная блокировка Этап 2

Давайте уточним дизайн далее, разделив разделы. Класс 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;
}

Это приводит к следующему макету:

Шаг 4: Треугольная блокировка Этап 3

Это заключительный этап процесса макета. Мы добавляем разделы для всех остальных элементов дизайна:

    Разделите класс div fs-header на fs-logo и fs-horiznav. Разделите fs-featured на fs-txt-featured и fs-features. Далее разделите fs-функции на fs-bigfeature и fs-smfeatures. Далее разделите fs-smfeatures на три блока, каждый из которых охватывает 5 колонок Blueprint. Никакие пользовательские классы CSS не нужны для последнего. Разделите fs-recentposts на пять секций fs-recentpost. (В следующем учебном пособии эти разделы будут интегрированы в WordPress, поэтому в цикле кода будет использоваться только один раздел.)

Вот как выглядит наш 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;
}

Это приводит к заключительной стадии макета, которая довольно близка по геометрии к нашему «нарезанному» графическому макету дизайна:

Теперь мы готовы подготовить окончательный код.

Шаг 5: Окончательный код шаблона

Это последний шаг в процессе кодирования, когда мы бросаем в фактические элементы дизайна, очищаем лишние div и классы и избавляемся от любых «блокирующих» элементов:

    Возьмите все пользовательские классы CSS и падение настроек фона и высоты - за исключением fs-horiznav. (Необходимы некоторые настройки ширины. Отбросьте те, которые этого не делают.) Теперь снимите элементы дизайна (изображения, текстовые блоки) в соответствующих местах. Используйте необходимые классы Blueprint. (Например, я использую «div class = 'clear» для принудительного сброса по вертикали после группы горизонтальных блоков. Посмотрите на это в примере и попробуйте удалить их, чтобы увидеть, что произойдет иначе.) Добавьте любые окончательные разделы div и CSS классы, по мере необходимости. Например, fs-smfeature, fs-posttitle, fs-postdate, fs-postauth, fs-descr, fs-recposts-head, fs-newsbox-head, fs-newsbox-ul. Удалите все пользовательские классы CSS, которые больше не нужны. Например, fs-features, fs-txt-featured. Удалите любые пользовательские «конструкторы», которые являются посторонними, или объедините их с существующими разделителями Blueprint в вашем HTML. Я оставил их для ясности. Обратите внимание, что приведенный ниже CSS-файл использует «контур» вместо «границы» для всех изображений. Контуры оказываются над верхней частью изображения и, таким образом, не занимают дополнительную экранную недвижимость. Высота строки по умолчанию по умолчанию - 115%.

Теперь у нас есть наш окончательный дизайн ниже, который совпадает с вершиной этого руководства:

Демо и загрузка

В окончательных файлах нет ни одного из элементов, заблокированных серой, и в файле style.css есть дополнительные подробные комментарии, которые помогут вам расшифровать назначение каждого настраиваемого класса. ZIP-файл включает изображения, обрезанные из различных плакатов фильма, которые являются авторскими правами их соответствующих владельцев. Файлы сетки CSS Blueprint не включены в ZIP-файл.

Обратите внимание, что между исходными файлами и кодом, представленным выше, могут существовать некоторые незначительные расхождения.

Заключительные мысли

Некоторые заключительные комментарии к примеру в этом учебном пособии:

    Представленный здесь код немного неуклюжим с его дополнительными тегами div, но они используются, чтобы четко проиллюстрировать процесс проектирования на основе сетки. В частности, я растянул макет и процесс кодирования, чтобы выделить возможные этапы. Многие элементы дизайна могут быть затянуты, а соответствующие классы div исключены в файле CSS. Как вы привыкли использовать CSS grid frameworks, вероятно, вы сжимаете три этапа моделирования meshup в CSS, рассмотренные выше, всего за один этап, особенно если у вас есть графический дизайн, чтобы начать с него. Это не единственный процесс для создания страниц на основе сетки. Для более глубокой обработки конструкции сетки см. Серию Марка Бултона «Пять простых шагов» для проектирования сетевых систем.

Это не сложный пример, ни полная тема для платформы блога, но я надеюсь, что это поможет вам понять, как использовать сетки CSS для дизайна веб-страниц. Хотя здесь код для статической страницы, следующим шагом является интеграция с платформой блога для создания шаблона домашней страницы.