Макет страницы – Подготовка макета многостраничного каталога — Блог Смартпринт.рф

Больше видео на нашем канале — изучайте интернет-маркетинг с SEMANTICA

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

• Дизайнер придумывает оформление.
• Верстальщик собирает визуальный интерфейс.
• Специалист по юзабилити продумывает расположение элементов таким образом, чтобы посещение страниц было комфортным.
• Маркетолог разрабатывает рекламные модели, от которых зависит расположение элементов для целевых действий.
• Программист пишет алгоритмы работы.
• Копирайтер наполняет блоки текстом.

Не обязательно присутствует полный набор профессионалов, но и сайты, созданные в одним человеком, тоже встречаются редко.

Для чего нужен макет сайта

Когда дизайнер нарисовал страницы, подключаются все участники процесса разработки. Именно в этот момент принимаются решения, вносятся доработки. Каждый оказывает свое влияние. Например, опытный копирайтер сразу может сказать, что блок для текста слишком велик или мал. Маркетолог увидит, что главная кнопка расположена не в том месте. А для мастера юзабилити становится очевидным, что предложенное меню неудобно для посетителя.

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

В веб-разработке создание макета происходит вместе с написанием технического задания. Без этого документа не обходится ни одна серьезная работа. Кроме того, что он защищает разработчика и клиента, помогает им договориться, это еще и расписанный алгоритм процесса создания сайта, в котором устанавливаются сроки и прописываются требования.

Макет является неотъемлемой частью ТЗ. Разработчик предлагает варианты, заказчик выбирает понравившийся. В итоге рождается модель, которая позволяет всем участникам двигаться к цели без непрерывных переделок и согласований.

Как сделать макет сайта

Прежде всего рисуется каркас – схематическое расположение блоков страницы. Часто это делается просто на листе бумаги. Хотя существует множество программ, позволяющих быстро и наглядно представить будущий сайт в виде модели.

AXURE

Можно попробовать бесплатно и при необходимости купить за 495$ или 895$ (командная версия). Удобен тем, что можно подключать нескольких пользователей и работать удаленно.

Функция «Preview» позволяет посмотреть каркас сразу в браузере.

Если необходимо дать доступ к файлу другим людям, в том числе и клиенту, можно опубликовать его в облаке.

После авторизации станет доступна ссылка на проект.

Большим плюсом является возможность перевести каркас в режим интерактивности. Это позволит показать переходы по ссылкам и нажатия на кнопки. Таким образом будет проработано юзабилити.

Если вас интересуют инструменты попроще, воспользуйтесь Microsoft Visio. Здесь создается просто статичный рисунок с блоками.

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

Photoshop

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

Sketch

Специализированный редактор для создания интерфейсов. Все его инструменты предназначены для веб-дизайна. Самый большой минус – поддержка только операционной системы MacOS.

KRITA

Бесплатный аналог фотошопа. Поддерживает как MacOS, так и Windows.

GIMP

Полнофункциональный бесплатный редактор растровой графики. Поддерживает слои, прозрачность, фильтры.

Многие элементы для сайта рисуют в Inkscape. Это бесплатный редактор векторной графики. В нем создаются текстуры, стрелки, логотипы и пр. При хороших навыках работы с векторами можно нарисовать и макет.

Что делать с макетом сайта дальше

Макет – это всего лишь рисунок. Для клиента он дает отдаленное представление о том, как будет функционировать ресурс. Не всегда отличный дизайн оказывается удобным для пользователя.

Поэтому следующим этапом целесообразно создать прототип – интерактивный макет. По исследованиям Якоба Нильсена, проведенным в 2015 году, 67% клиентов предпочитают видеть будущий сайт в действии.

Существует достаточное количество онлайн-инструментов, позволяющих оживить дизайн. Расскажем об одном из них.

Marvel

Бесплатно может работать один пользователь, доступно два проекта. Так как идентификация осуществляется по адресу электронной почты, то можно использовать разные и создавать какое угодно количество прототипов. Но они не будут находиться в одной области, это неудобно. За 12$ можно работать с неограниченным числом макетов, а за 42$ доступ получают одновременно три пользователя.

После создания проекта в него перетаскиваются изображения страниц.

Редактирование заключается в выделении фрагментов и наделении их интерактивными действиями.

Всего доступны три варианта:

1. Переход по ссылке на страницу, на внешний ресурс или создание анкора.
2. Экранные переходы для визуализации событий. Например, смена блоков при наведении.
3. Обработка событий: клик мыши, нажатие на клавишу.

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

Чтобы посмотреть в действии, нажмите «Play». Страница откроется в браузере, а ссылка будет активна.

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

Это имитация работы будущего сайта. Можно сразу понять, что увидит пользователь при совершении того или иного действия.

Создание каркаса, затем макета и интерактивного прототипа помогут сократить время на устранение ошибок в разработке и последующий работе сайта после его запуска.

Типовые макеты | htmlbook.ru

Когда продумывается дизайн сайта, учитывается объём будущей информации на нём, привычки потенциальных посетителей, удобство доступа к материалу и множество других вещей. Типовые элементы вроде заголовка, навигации, контента, контактной информации надо разместить на одной странице, в совокупности это и называется её макетом. Таким образом, макет это способ организации материалов на веб-странице. Самих макетов существует огромное количество, но их, тем не менее, можно систематизировать по ряду признаков, например, по ширине, по количеству колонок, по расположению элементов, по устройствам на которые они ориентированы и др. Наиболее популярным является деление макетов по ширине и количеству колонок, которые и рассмотрим далее.

Макеты по ширине

Различают пять типов макетов, связанных с шириной:

• фиксированные;
• резиновые;
• эластичные;
• адаптивные;
• комбинированные.

Фиксированный макет

Альтернативные названия: фикс (жарг.), fixed (англ.), фиксированный дизайн.

Макет обычно располагается по центру окна браузера, а его ширина ограничивается заданными размерами в пикселах (рис. 5.1).

Рис. 5.1. Фиксированный макет в браузере

Преимущества

• Из-за того, что ширина всех колонок известна, проще указывать размеры изображений, видео и других элементов страницы.
• Браузеры, как правило, лояльнее относятся к таким макетам, поэтому на вёрстку и отладку уходит меньше времени.

Недостатки

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

Сайты

Резиновый макет

Альтернативные названия: резина (жарг.), liquid (англ.), резиновый дизайн.

Ширина колонок задаётся в процентах или сочетаются проценты и пикселы таким образом, что макет занимает всю свободную ширину окна браузера. При изменении размеров окна или другом разрешении монитора макет подстраивается под них (рис. 5.2).

Рис. 5.2. Резиновый макет в браузере

Преимущества

• Используется вся эффективная область страницы.
• Веб-страницы удобно печатаются на бумаге любого формата.
• Веб-страницы хорошо смотрятся на разных устройствах от iPhone до ноутбука.

Недостатки

• На мониторах с высоким разрешением сайт плохо читается из-за чрезмерного удлинения строк текста. Здесь помогает ограничение ширины контента с помощью свойства max-width. Опять же некоторые владельцы больших мониторов уменьшают окно браузера до комфортных для них размеров.
• Резиновые макеты сложнее верстать и отлаживать в разных браузерах.

Сайты

Эластичный макет

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

Преимущества

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

Недостатки

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

Сайт

Адаптивный макет

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

Преимущества

• Этот тип макета наиболее удобен для пользователя, поскольку не зависит от разрешения и ширины окна браузера, приспосабливаясь под них.
• Макет комфортно можно смотреть на любом устройстве.

Недостатки

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

Сайт

• Вид сайта http://www.w3.org показан на рис. 5.3. При уменьшении ширины окна до 500 пикселов и менее, дизайн сайта сменится (рис. 5.4).

Рис. 5.3. Сайт W3C при обычной ширине

Рис. 5.4. Сайт W3C при узкой ширине

Комбинированный макет

Альтернативные названия: гибрид, hybrid (англ.).

Этот макет предполагает использование разной ширины для отдельных частей страницы, например, шапку и подвал делают резиновыми, а контент фиксированным (рис. 5.3).

Рис. 5.5. Комбинированный макет

Этот макет в действительности не является самостоятельным типом, поэтому наследует все плюсы и минусы фиксированного и резинового макета.

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

Сайт

Макеты по колонкам

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

Наиболее распространенным вариантом является наличие на веб-странице двух колонок — одна из них, как правило, содержит навигацию, а во второй, более широкой колонке, размещается контент. Для резиновых макетов имеет смысл установить три колонки, чтобы эффективно использовать полезную площадь веб-страницы. В любом случае выбор числа колонок зависит исключительно от объема информации на сайте и способе её организации.

Глава 4. Создание макета страницы и верстка

Сравнение CSS grid и Flexbox

Здравствуйте! В этой статье я решил провести сравнение двух популярных технологий для верстки сайтов CSS Grid и Flexbox. Ещё не так давно  макет для всех страниц HTML верстался с помощью таблиц, float и других свойств CSS, которые не очень хорошо подходят для стилизации сложных веб-страниц.

Затем появился Flexbox — режим вёрстки, который был специально разработан для создания надёжных адаптивных страниц. Flexbox упростил правильное выравнивание элементов и их содержимого и теперь является предпочтительной системой CSS для большинства веб-разработчиков.

Но теперь у нас есть новый претендент на титул за звание «лучшей системы для вёрстки макетов HTML» (название титула ещё в процессе разработки»). Это CSS Grid и в ближайшее время эта система будет доступна в браузерах Firefox 52 и Chrome 57, а вскоре, как я надеюсь, и в других браузерах.

Базовый макет

Чтобы понять, каково это — создавать макеты на каждой системе, мы сделаем одну и ту же HTML-страницу дважды — один раз с помощью Flexbox, а затем на CSS Grid. Вы можете скачать оба проекта отсюда.

Уменьшенный макет веб-страницы

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

1. Разместить четыре основных раздела макета.
2. Сделать страницу адаптивной (боковая панель опускается ниже основного содержимого на маленьких экранах).
3. Выровнять содержимое шапки — навигация слева, кнопка справа.

Как вы можете видеть, ради сравнения мы оставили всё максимально простым. Начнём с первого испытания.

Читать далее

HTML Макет

Пример Макета HTML

Лондон является столицей Англии. Это самый густонаселенный город в Соединенном Королевстве, с пригородами свыше 13 миллионов жителей.

Стоя на берегу реки Темзы, Лондон был крупным поселением на протяжении двух тысячелетий, за его историю, уходящую своего основания римлянами, которые назвали его Londinium.

Элементы Макета HTML

Сайты часто отображает контент в несколько колонок (подобно журналу или газете).

Спецификация HTML5 предлагает новые семантические элементы, которые определяют разные части веб-страницы:

Макеты Компоновки HTML

Есть четыре различных способа для создания макетов из нескольких столбцов. Каждый способ имеет свои плюсы и минусы:

• Модель table HTML
• Модель float CSS
• Модель framework CSS
• Модель flexbox CSS

Какой выбрать?

Модель table HTML

Элемент <table> не был разработан, для инструмента макет! Задача элемента <table> отображать табличные данные. Так что лучше, не нужно использовать таблицы для разметки макета! Они внесут беспорядок в коде. И представьте, как трудно будет перестроить свой сайт через пару месяцев.

Совет: Не используйте таблицы для разметки макета!

Модель framework CSS

Если вы хотите создать свой макет быстро, вы можете использовать фреймворк, как W3.CSS или Bootstrap.

Модель float CSS

Он является общим, чтобы сделать весь веб-макетов, используя CSS свойства float.

Поплавок легко изучить — нужно просто вспомнить, как работают свойства float и clear. Недостатки: Плавающие элементы привязаны к документообороту, который может нанести вред гибкости.

Подробнее о float в нашей главе CSS Float и Clear.

Пример Макета Float

Лондон является столицей Англии. Это самый густонаселенный город в Соединенном Королевстве, с пригородами свыше 13 миллионов жителей.

Стоя на берегу реки Темзы, Лондон был крупным поселением на протяжении двух тысячелетий, за его историю, уходящую своего основания римлянами, которые назвали его Londinium.

Модель flexbox CSS

Модель flexbox — новый режим макета в CSS3.

Использование flexbox гарантирует, что элементы ведут себя предсказуемо, когда макет страницы должен вмещать разные размеры экрана и различных устройств отображения. Недостатки: Не работает в IE10 и ранних версиях.

Узнать больше о спецификации flexbox в нашей главе CSS Flexbox.

Пример Макета Flexbox

Лондон является столицей Англии. Это самый густонаселенный город в Соединенном Королевстве, с пригородами свыше 13 миллионов жителей.

Стоя на берегу реки Темзы, Лондон был крупным поселением на протяжении двух тысячелетий, за его историю, уходящую своего основания римлянами, которые назвали его Londinium.

Правила подготовки макетов в Figma / Habr

Боль с одним проектом привела нас к решению написать правила работы

Результатом хождения по граблям между отделами дизайна и разработки стала идея сформулировать правила, высечь их в камне, поместить в pdf файл и раздать всем участникам процесса с директивой «следуй».

1. Используй сетку

Сетка помогает организовать элементы. Как метроном в музыке, задает ритм. Восприятие порядка в макете, как и в реальности приятно глазу, создает ощущение «неслучайности».

Хорошая статья про сетки.

Когда сеткой начинают пользоваться и дизайнеры и разработчики — многие проблемы отпадают. Вот один из примеров такого подхода. При верстке макета больше не нужно мерить отступы между каждым элементом. Все они подчинены заранее заданным модулям.

Текстовые фреймы, иконки, менюхи, попапы, дропдауны, контролы вот это всё всё всё должно быть кратно модулям сетки. Или хотя бы стремиться к этому.

Вот что говорят ребята из отдела разработки по поводу сеток:

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

2. Задавай текстовым блокам осознанные размеры

Вот два с виду одинаковых текстовых блока. Описание и цена. Но если посмотреть как они выглядят в макете — сразу видна разница.

Виталий, разработчик:

Когда я вижу макеты с разными отступами между блоками, меня аж трясет!!! Дизайнеры, перестаньте так делать, это же ужасно.

3. Следи за боковыми отступами

Разница должна быть чем-то обоснована, не должно получаться случайных значений.

Виталий, разработчик:

Если отступы в блоке одинаковы — свойство, задающее отступ в родительском блоке, имеет вид padding: 0, 24.

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

4. Используй Grow Vertically для текстовых блоков

Виталий, разработчик:

Хорошо когда размеры текстовых блоков по высоте изменяются автоматически. В таких блоках можно через свойства сразу получить корректную высоту. В отличии от правого примера, где высота блока 27 px, а по факту должна быть 70 px.

5. Соблюдай целые значения в пикселях

Расстояния между объектами должны быть выражены целыми значениями. Так же как и размеры самих объектов.

Внешне, макеты с дробными значениями не всегда отличимы от «нормальных», но стоит погрузиться в них… и начинаются проблемы. Часто дробные значения возникают, если взять группу объектов и масштабировать ее. Очень часто такие значения свидетельствуют о том, что дизайнер поторопился и не проверил этот момент.

Виталий, разработчик:

Вчера пришла в работу задача на верстку. Открываю макет в фигме, и что вижу… Отступы все дробные, кегель у шрифта — дробный, межстрочник — тоже дробный. Не, ну я, конечно, написал дизайнеру. Подождал ответа, подождал пока он разберется, откуда это всё взялось. В итоге только к вечеру смог приступить к этой задаче.

6. Используй компоненты

Идеология компонентов — главное, что отличает Figma от инструментов предыдущего поколения. Создавай компоненты по любой понятной и удобной тебе методике. Например, концепция атомов, при которой начиная с простейших элементов (формы, надписи) постепенно группируются более сложные компоненты на их основе.

Или создание отдельных блоков в виде компонентов и их переиспользование. Главное, чтобы выбранный подход был логичным и понятным для тех, кто будет работать после или одновременно с тобой. Мы, как правило, используем компоненты в зависимости от сложности проекта.

Компонентам и их использованию посвящены отдельные статьи. С описанием работы constraints и сеток внутри компонентов.

7. Называй группы и фреймы осмысленно

Понятные названия помогут другим разобраться в твоем макете и не вспоминать тебя “теплыми” словами.

Виталий, разработчик:

Среди разработчиков есть культура написания имен переменных и функций. А вы, дизайнеры, чем лучше? Почему вы с легкостью отдаете макеты с неинформативными названиями? Подписывайте ясно и четко названия фреймов и компонентов.

8. Делай растр с двукратным или трехкратным запасом по размеру.

Существует много мониторов с увеличенной плотностью пикселей. Что это означает для дизайнера?

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

Виталий, разработчик:

Помню как в 2000-м году выходил в интернет через старый добрый US Robotics Courier на скорости 14 400 бит/с… Тогда графику делали 1в1, сайты верстали таблицами, не было ретин и прочих смартфонов. В общем жили не тужили. Сейчас CSS псевдо классы позволяют ребятам с ретиной и прочими hi-end дисплеями подгружать специально для них предназначенные растровые изображения. При этом не грузить их всем остальным.

Макет страницы | Учебник HTML5

Макет страницы.

Несмотря на то что все дизайнеры создают собственные шаблоны страниц, почти любой веб-сайт можно разбить на следующие основные разделы.

В верхней области, обозначенной «Заголовок», обычно находится логотип, название, подзаголовок и краткое описание веб-сайта или веб-страницы.

Под этой областью находится панель навигации, на которую почти все разработчики помещают меню или ссылки для перемещения по сайту. С помощью панели навигации пользователи переходят к различным страницам или документам, обычно в пределах одного веб-сайта. Основное содержимое страницы размещается, как правило, в середине макета. В этой области представлена самая важная информация и ссылки. Чаще всего ее делят на несколько строк и столбцов. На рис. 1.1 вы видите только два столбца, «Основная информация» и «Боковая панель», но данная область является очень гибкой, и дизайнеры настраивают ее в соответствии с поставленными требованиям, добавляя новые строки, разбивая столбцы на блоки меньшего размера и создавая разнообразные комбинации и варианты размещения информации. Содержимое этой части макета, как правило, имеет наибольший приоритет. В нашем примере в области «Основная информация» могли бы содержаться список статей, описания продуктов, записи блога и любые другие сведения. В область «Боковая панель» можно было бы поместить список ссылок на каждый из этих элементов. Например, на странице блога здесь обычно находится список ссылок на каждую запись, на страницу с информацией об авторе и т. п.

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

На рис. 1.2 приведен пример обычного блога. Здесь вы можете легко определить все составляющие дизайна, перечисленные ранее:

1. Заголовок.

2. Панель навигации.

3. Основная информация.

4. Боковая панель.

5. Служебная информация или нижний колонтитул.

Это простое представление блога помогает понять, что у каждого раздела веб-сайта есть определенное назначение. Не всегда деление так очевидно, но перечисленные разделы можно обнаружить на каждом веб-сайте.

В HTML5 учитывается эта базовая структура и макет, и для каждого из разделов существуют новые элементы, позволяющие объявлять и различать их. Теперь мы можем указать браузеру, для чего предназначены разделы страницы.

<header> </header> <nav> </nav>

< section > <aside>

</section>  </aside>

<footcr> <tfootcr>

Рис. 1.3. Визуальное представление структуры макета с помощью тегов HTML5

На рис. 1.3 показан тот же типичный макет, который мы использовали ранее, но здесь все разделы обозначены с помощью соответствующих элементов HTML5 (приведены как открывающие, так и закрывающие теги).

<header>

Один из новых элементов, появившихся в HTML5, — <header>. Не путайте <header> с тегом <head>, о котором мы говорили ранее и который описывает «голову» документа. Аналогично <head>, тег <header> содержит вводную информацию (такую как заголовки, подзаголовки или логотипы), однако области применения этих двух тегов различаются. Тег <head> предназначен для хранения информации обо всем документе, тогда как <header> используется только для тела документа или для его разделов.

Листинг 1.10. Использование элемента <header>

<! DOCTYPE html>

<html lang=»ru»>

<head>

<meta charset=»utf-8″>

<meta name=»description» content=» пример HTML5″>

<link rel=»stylesheet» href=»mystyles. css»>

</head>

<body>

<header>

<h2>Это главный заголовок веб-сайта</h3>

</header>

</body>

</html>

Если вы выполняли задания с самого начала главы, то у вас уже должен быть готов к тестированию текстовый файл, содержащий все рассмотренные элементы кода. Если же это не так, просто скопируйте код из листинга 1.10 в пустой текстовый файл, использовав какой-нибудь текстовый редактор (например, Блокнот в Windows), и сохраните полученный документ под любым именем с расширением. html. Чтобы проверить результат выполнения кода, откройте этот файл в браузере, совместимом с HTML5. Это можно сделать прямо из браузера, выбрав пункт меню File (Файл), или дважды щелкнуть на нужном файле в файловом менеджере.

В листинге 1.10 с помощью тега <header> мы определяем заголовок веб-страницы. Не забывайте, что этот заголовок и общий заголовок, определенный ранее в «голове» документа, — это разные вещи. Тег <header> указывает на начало основного содержимого документа, его видимой части. Начиная с этого тега, мы будем видеть результаты нашего кода в окне браузера.

повторяем основы-

Между тегами <header> в листинге 1.10 используется тег, который вам может быть незнаком. Тег <h2> — это старый элемент из спецификации HTML, определяющий заголовок. Цифра в названии тега указывает на уровень заголовка. Элемент <h2> определяет самый важный заголовок, а <h6> — наименее значимый. Таким образом, <h2> используется для отображения главного заголовка страницы, а с помощью остальных можно описывать подзаголовки документа. Позже мы увидим, как эти элементы работают в HTML5.

<nav>

Следующий раздел нашего примера — это панель навигации. В HTML5 для ее описания используется тег <nav>.

Листинг 1.11. Использование элемента <nav>

<! DOCTYPE html>

<html lang=»ru»>

<head>

<meta charset=»utf-8″>

<meta name=»description» content=»пример HTML5″>

<link rel=»stylesheet» href=»mystyles. css»>

</head>

<body>

<header>

<title>Это основной заголовок веб-страницы</title>

</header>

<nav>

<ul>

<Н>домой</Н>

<Н>фотографии</Н>

<Н>видео</Н>

<Н>контакты</Н>

</ul>

</nav>

</body>

</html>

Как вы видите в листинге 1.11, элемент <nav> находится между тегами <body>, после закрывающего тега заголовка </header>, но не между тегами <header>. Смысл в том, что <nav> — это не часть заголовка, а отдельный раздел.

Мы уже говорили ранее, что структура и порядок использования элементов в HTML5 определяются разработчиком. HTML5 — очень гибкий язык, он всего лишь предоставляет параметры и базовые элементы, а как их применять, решаем мы сами. Например, тег <nav> можно было бы поместить внутрь элемента <header> или в любой другой раздел тела документа. Однако необходимо учитывать, что эти новые теги создавались для того, чтобы предоставлять браузерам больше информации и помогать любым новым программам и устройствам распознавать наиболее важные части документа. Для создания понятного и переносимого кода мы рекомендуем следовать стандартам и писать чистый код, без лишних хитростей. Элемент <nav> предназначен для определения навигационных элементов, таких как главное меню или основные панели навигации. Используйте его только для этих целей.

повторяем основы-

В листинге 1.11 мы создали список пунктов меню для нашей веб-страницы. Между тегами <nav> используются два элемента для создания списка. Элемент <ul> определяет сам список. Между открывающим и закрывающим тегами <ul> вы видите несколько тегов <li> с различным текстом, который представляет собой пункты нашего меню. Как вы уже догадались, теги <li> применяются для определения элементов списка. В этой книге мы не ставим себе целью научить вас основам HTML. Если вам необходима более подробная информация о стандартных элементах языка, зайдите на наш веб-сайт и просмотрите ссылки для этой главы.

<section>

Далее в нашем типовом дизайне нужно определить разделы, обозначенные на рис. 1.1 как «Основная информация» и «Боковая панель». Как уже говорилось ранее, в области основной информации выводится главное содержимое документа. Эта область может принимать самые разные формы, например, ее можно поделить на несколько блоков или столбцов. Поскольку эти блоки и столбцы не имеют конкретного назначения, то элемент HTML5 для их определения имеет общее название <section> (раздел).

Листинг 1.12. Использование элемента <section>

<! DOCTYPE html>

<html lang=»ru»>

<head>

<meta charset=»utf-8″>

<link rel=»stylesheet» href=»mystyles. css»>

</head>

<body>

<header>

<h2>Это главный заголовок веб-сайта</h2>

</header>

<nav>

<ul>

<li>домой</li>

<li>фотографии</li>

<li>видео</li>

<Н>контакты</Н>

</ul>

</nav>

<section>

</section>

</body>

</html>

Как и панель навигации, область основной информации представляет собой еще один независимый раздел документа. Поэтому он определяется после закрывающего тега </nav>.

Сравните код в листинге 1.12 и макет на рис. 1.3 и попробуйте понять, в каком порядке расположены теги в коде и каким разделам они соответствуют в визуальном представлении веб-страницы.

Теги, определяющие разделы документа, в коде следуют один за другим, но на веб-странице некоторые из них могут располагаться рядом, а не один под другим (например, «Основная информация» и «Боковая панель»). В HTML5 визуальное отображение элементов на экране определяется с помощью CSS. Каждому элементу назначается свой CSS-стиль. Изучением CSS мы займемся в следующей главе.

<aside>

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

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

В HTML5 можно обозначать такую вспомогательную информацию с помощью элемента <aside> (листинг 1.13).

<! DOCTYPE html>

<html lang=»ru»>

<head>

<meta charset=»utf-8″>

<meta name=»description» content=»пример HTML5″>

<link rel=»stylesheet» href=»mystyles. css»>

</head>

<body>

<header>

<h2>Это главный заголовок веб-сайта</h2>

</header>

<nav>

<ul>

<Н>домой</Н>

<li>фотографии</li>

<li>видео</li>

<Н>контакты</Н>

</ul>

</nav>

<section>

</section>

<aside>

<blockquote>Статья номер 1</blockquote>

<blockquote>Статья номер 2</blockquote>

</aside>

</body>

</html>

Элемент <aside> может располагаться на странице справа или слева, он не имеет конкретного местоположения. Этот тег описывает всего лишь заключенную в него информацию, а не ее место в структуре документа. Таким образом, элемент <aside> можно добавлять в любую область макета и использовать для любого содержимого, не относящегося к основной информации веб-страницы. Например, элемент <aside> можно поместить внутрь элемента <section> или даже внутрь основной информации документа (один из способов оформления цитат).

<footer>

Для завершения шаблона и структуры документа HTML5 нам осталось добавить только один элемент. У нас уже есть заголовок тела документа, панель навигации и раздел основной информации, а также боковая панель со вспомогательной информацией. Завершающий элемент должен визуально закончить дизайн и обозначить конец тела документа. В HTML5 для этого используется специальный тег <footer> (листинг 1.14).

Листинг 1.14. Использование элемента <footer>

<! DOCTYPE html>

<html lang=»ru»>

<head>

<meta charset=»utf-8″>

<meta name=»description» content=»Это пример HTML5″>

<meta name=»keywords» content=»HTML5, CSS3, JavaScript’^ <title>Этот текст — заголовок документа</title>

<link rel=»stylesheet» href=»mystyles. css»>

</head>

<body>

<header>

<h2>Это главный заголовок веб-сайта</h3>

</header>

<nav>

<ul>

<li>домой</li>

<li>фотографии</li>

<Н>видео</Н>

<Н>контакты</Н>

</ul>

</nav>

<section>

</section>

<aside>

<blockquote>Статья номер 1</blockquote>

<blockquote>Статья номер 2</blockquote>

</aside>

<footer>

Copyright &copy; 2010-2011 </footer>

</body>

</html>

В типичном макете веб-страницы для описания раздела «Служебная информация» используется элемент <footer>. С его помощью мы определяем «подвал» нашего документа, в котором, как правило, содержатся общие сведения об авторе или компании, владеющей проектом, а также авторское право, условия использования и т. д.

Обычно элемент <footer> добавляется в конец документа и выполняет функцию, описанную ранее. Однако его можно использовать в теле документа несколько раз — в конце разных разделов (точно так же в документе можно неоднократно использовать тег <header>). Но об этом мы поговорим чуть позже.

Стоит сказать пару слов о CMS и хостинге для Битрикс. В вопросе создания сайта чрезвычайно важно подобрать CMS, которая будет в минимальной степени подвержена всевозможным угрозам безопасности. Одной из таких CMS на сегодняшний день является «1С-Битрикс», но для ее использование потребуется специальный хостинг, который будет заточен сугубо под данную CMS с учетом всех ее нюансов.

Вам также могут быть интересны следующие статьи:

Подготовка макета многостраничного каталога — Блог Смартпринт.рф

Подготовка макета каталога — сложный процесс, который требует больших затрат времени и профессиональных навыков. 

Рассказываем об тонкостях дизайна, верстки и печати каталогов. 

Топ вопросов по подготовке макета:

Как сделать макет каталога?

Как подготовить каталог к печати?

Какую бумагу выбрать для каталога?

Как проверить макет перед печатью?

Где используют каталоги?

Каталог помогает презентовать компанию, услуги или продукты. 
Существует разные виды каталогов, их дизайн и контентная часть зависят от задач, для выполнения которых каталог создается:

• Для презентации компании (имиджевые каталоги) — подходит для крупных компаний, которым нужно продемонстрировать производственные возможности. Имиджевые каталоги используют в случаях, когда познакомиться с брендом другим способом сложно из-за внушительных масштабов продукции или технических особенностей.

• Для знакомства с продукцией (продуктовые каталоги). Задача такого каталога показать товар,  привлечь внимание, заинтересовать потребителя. 
  

• Для выполнения маркетинговых задач (акционные). Обычно это каталоги со скидками и акциями, выпускаются с определенной периодичностью (две недели, месяц).

Этапы создания каталога

Задача любой сложности выполнима, если разложить её на простые составляющие. С дизайном и версткой  тоже самое.

Создание каталога состоит из следующих этапов:

Разработка идеи/концепции дизайна

Работу над макетом следует начать с постановки задач, которые вы хотите достичь (создание имиджа компании, увеличение продаж, презентация продукта и т.д.) и определения целевой аудитории и её потребностей. Это станет фундаментом для создания контентной части и выбора визуальных образов, стилистики и подбора цветов.

Чаще всего у компании уже есть своя айденика, фирменные паттерны и логотип, остается лишь грамотно встроить элементы в макет каталога.

Верстка макета

Этот этап не менее важен, чем создание концепции. Макет должен соответствовать общим требованиям подготовки макета (наличие вылетов, цветовая модель, качество изображений и т.д.). Кроме того, в типографии могут быть свои требования, в зависимости от того,  на каком оборудовании осуществляется печать. Чтобы не возникало необходимости доработки макета, лучше сразу запросить информацию по требованиям к печати в выбранной типографии.

Печать и постпечатная обработка

При оформлении заказа следует закладывать время на печать, просушку листов, постпечатную обработку. К постпечатной обработке относятся: резка, высечка, ламинация, УФ-лакирование, биговка, фальцевание, тиснение, брошюрование.

Общие правила подготовки макета для типографии

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

• Цветовая модель CMYK

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

Последствия: при переводе цветов из RGB в  CMYK оттенки на экране и на бумаге могут отличаться, стать более блеклыми.

У нас на Смартпринт.рф есть опция «проверка макета специалистом». После проверки вам на почту приходит  письмо, в котором указаны ошибки в макете и исправленный файл в формате PDF. Вам нужно только проверить этот файл и согласовать его в печать. Опция бесплатна при оформлении заказа.

• Наличие вылетов

Вылеты — продолжение цветовых элементов макета за край обрезного формата на 3-5 мм. (в зависимости от вида полиграфической продукции). Они нужны, чтобы избежать брака при резке.

Как сделать вылеты в Corel Draw?

• Качество изображений

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

Для печати подходят изображения с разрешением только 220-300 dpi в масштабе 1:1. При использовании изображений с низким разрешением (например, скаченным из интернета) картинка после печати получится размытой или разойдется на кубики (пиксели).

• Соответствие заданному формату

Часто один и тот же макет печатают в разных форматах (например, плакаты А1, плакаты А2 и листовки А6). Файл отправляют один, допустим, на А1 формат. Если эти изделия оформлены одним заказом, то специалисту препресс (допечатная обработка) понятно, что файл нужно масштабировать до заказанного формата.

Если сначала заказали плакаты А1, а через три недели — листовки А6, то возникает вопрос: «Файл выслан не в том формате или неверно указаны параметры изделия при оформлении заказа?».

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

Рекомендации для подготовки макета каталога в печать

Есть еще ряд рекомендаций и требований, применимых именно к многостраничным изданиям. Хорошая контентая часть — еще не залог успеха. Важно подумать о клиенте, его комфорте пи изучении информации, на каких элементах стоит сделать акцент, какой объем информации подать.

• Удобочитаемость

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

Не делайте текст слишком мелким. Если нужно вместить большое количество информации, то лучше увеличить формат каталога или количество страниц.

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

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

• Количество страниц

Количество страниц (или полос) в каталоге должно быть кратно четырем. (8, 12, 16, 20, 24).

Иногда в запросах на расчет между заказчиком и менеджером возникает недопонимание из-за путаницы листов со страницами.

Один лист состоит из двух страниц или полос (лицо и оборот). Поэтому в каталоге (брошюре) на скрепку количество полос всегда кратно 4 (так как один лист сгибается пополам и в середине прошивается скрепкой, образуя в готовом изделии 4 полосы).

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

• Начальная и концевая полоса

Начальная полоса стоит в начале раздела и представляет собой титульный лист. Правила предусматривают расположение начальных полос либо с начала листа, либо со сдвигом влево или вниз, но не более чем на 1/3 полосы.

Концевая полоса располагается в конце теста. Она может занимать почти весь объем страницы, но не менее 1/4 размеры полосы.

Для обложки используют мелованную бумагу от 157 г/м2 до 270 г/м2., при необходимости (например, если вы готовите каталог не для выставки, а на раздатку) для обложки можно взять и тонкую бумагу (от 80 г/м2). Блок чаще всего печатают на ВХИ 80 г/м2 или  мелованной глянцевой/матовой 115 г/м2. 

Похожие статьи: