Как сделать шапку страницы html. Как разбить макет страницы на секции

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

Когда лучше переводить изображение в черно-белый

Есть три идеи, которые приходят мне на ум, когда я пытаюсь оценить, должен ли я перевести свое изображение в черно-белое (здесь и далее буду называть сокращенно ЧБ):

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

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

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

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

Как преобразовать цветное изображение в черно-белое

Ладно, давайте теперь поговорим о том, как перевести изображение в ЧБ, потому что есть два пути: правильный и неправильный. Вы, конечно, можете получить такой же результат, но если вы делаете это неправильно, вы в действительности будете терять качество (технически, вы приносите в жертву байты информации). В этой статье я буду говорить об использовании Adobe Photoshop. Есть и другие программы для конвертации, которые вы можете купить, но с точки зрения целесообразности, зачем платить дополнительно, когда вы очень легко можете сделать это в Photoshop.

Шаг 1

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

Шаг 2

Не делайте этого!

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

То, что вы хотите сделать, делается с использованием настроек черно-белого. Вы можете получить доступ к ним либо из верхнего меню Изображение > Режим > Черно-белый (Image > Adjustments > Black&White) или в боковой панели справа нажмите на кнопку настроек (как показано на рисунке), а затем нажмите на ЧБ значок, который обозначен черным прямоугольником, разделенным на черное и белое по диагонали.

Шаг 3

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

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

Шаг 4

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

Шаг 5

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

David Wahlman - свадебный и портретный фотограф из Реддинга, Калифорния. Он работает в окрестностях Калифорнии и стремится расширять географию своих съемок. Вы можете посмотреть его лучшие работы над www.wahlmanphotography.com и следите за его постами на

Вёрстка страницы представляет собой процесс разработки структуры html-документа, результатом которого является веб-страница. Структура веб-страницы определяется соответствующими html-тегами. Теги — прямоугольные блоки-контейнеры для содержимого — не отображаются в окне браузера. Они сообщают браузеру о типе контента, а браузер на основании этой информации выводит на экран их содержимое — текст или медиа-файлы.

Как создать структуру страницы с помощью блоков (блочная вёрстка) 1. Как разбить макет страницы на секции

Чтобы создать макет страницы, необходимо выделить основные разделы (секции) документа. Подробнее о секционных элементах вы можете прочитать в статье .

Стандартная веб-страница содержит следующие секции:

Рис. 1. Основные секции страницы

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

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

Рис. 2. Основные секции страницы с тегом-контейнером

и задать для него максимальную ширину, внутренние отступы, которые будут отделять контент от краёв экрана устройств с небольшим разрешением, а также внешние отступы, позволяющие выровнять контейнер по середине родительского блока:

Container { width: 100%; max-width: 1024px; /*максимальная ширина может иметь другое значение*/ padding: 0 15px; margin: 0 auto; }

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

2. Разметка шапки сайта и позиционирование её элементов

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

LOGO

• Главная
• О нас
• Контакты

Рис. 3. Шапка сайта с добавленными логотипом и ссылками

Logo { float: left; } nav { float: right; } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; /*один из способов разместить элементы в строку*/ }

Существует несколько способов разместить блочные элементы в строку. Все они приведены в уроке .

Рис. 4. Эффект схлопывания блока-контейнера

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

Container:after { content: ""; display: table; clear: both; }

Также добавим ему вертикальные отступы, отделяющие элементы внутри него от краёв шапки. В результате стили будут иметь следующие вид:

Container { width: 100%; max-width: 1024px; padding: 15px; margin: 0 auto; }
Рис. 5. Очистка потока

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

Рис. 6. Логотип-картинка

В нашем примере высота логотипа равна 38px , поэтому чтобы выровнять ссылки меню по высоте по середине шапки, нужно задать для них соответствующую высоту строки:

Nav a { text-decoration: none; line-height: 38px; } Рис. 7. Выравнивание ссылок меню шапки

3. Создание сетки для основной части страницы

Основная часть страницы чаще всего представляет собой сетку из блоков разной ширины. Позиционирование таких блоков осуществляется также с помощью свойства float . Каждую строку блоков обернём дополнительным блоком с классом.row:

Рис. 7. Сетка основной части страницы.col-1-2 { width: 50%; float: left; } .col-1-3 { width: 33.3333333333%; float: left; } .col-1-4 { width: 25%; float: left; } .col-2-3 { width: 66.6666666667%; float: left; }

Для элемента с классом.row также применим очистку потока:

Container:after, .row:after { content: ""; display: table; clear: both; }

Чтобы отделить ряды друг от друга, можно добавить нижний внешний отступ:

Row { margin-bottom: 15px; }

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

Рис. 8. Разная высота элементов сетки

Высоту блоков можно зафиксировать, указав её явно, например, .row div {height: 100px} . Но в этом случае нужно быть уверенным, что при добавлении адаптивности макету содержимое блоков не будет выходить за край блока.

Если необходимо задать фоновый цвет для блоков ряда, то это можно сделать следующим образом: для элемента с классом.row добавим новый класс, который позволит стилизовать только этот ряд (получится.row row-one), укажем для него фоновый цвет меньшего по высоте блока, а для высокого блока зададим его собственный цвет, то есть таким образом мы сделаем фоновую подложку.

Lorem ipsum dolor sit amet. Duis lobortis tempor tortor vel iaculis. Fusce volutpat commodo lacus, eget vestibulum lorem semper at. .row-one { background: lightblue; } .col-2-3 { width: 66.6666666667%; float: left; background: seashell; }
Рис. 9. Фоновая подложка

Если основная секция страницы содержит только два блока, то дополнительный ряд-обёртку можно не добавлять:

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

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

Основная сложность с резиновым макетом это обеспечить корректное отображение на разных разрешениях, от высокого до низкого. Поскольку мы ограничили ширину контента 760 пикселами, картинку в шапке стоит разместить так, чтобы более важная часть изображения вписывалась в этот размер. На рис. 6.3 показано, как это сделать. Тёмным цветом выделена центральная часть шириной 760px, буквой А обозначены одинаковые по ширине оставшиеся фрагменты.

Рис. 6.3. Ширина шапки

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

Header { display: block; /* Для старых браузеров */ height: 405px; /* Высота шапки */ background: url(images/header-bg.png) no-repeat center bottom; }

В идеале рисунок должен иметь большую ширину от 2000 пикселов, тогда практически при любом разрешении монитора рисунок будет показывать центральную часть, обрезая всё, что не помещается в окно. Но беда в том, что изначально картинка не настолько широкая, а рисовать бесконечно тянущиеся по бокам чёрные полоски не хочется. Один из вариантов решения это включить повторение фона по горизонтали. Те, у кого разрешение 1280 пикселов по ширине и меньше, увидят единственную картинку, а владельцы широких мониторов смогут полюбоваться сразу несколькими животными и одновременно заходящими солнцами. Здесь важно подредактировать рисунок так, чтобы он без стыков совмещался сам с собой по горизонтали (рис. 6.4). Градиент для наглядности спрятан.

Рис. 6.4. Совмещение изображения по горизонтали

На данном рисунке место стыка обозначено стрелкой и промежутком, чтобы стык можно было заметить. Если правильно отредактировать правую и левую часть фоновой картинки, то она будет повторяться по горизонтали без видимых стыков, как один сплошной рисунок. Остаётся слегка подправить стиль, заменив значение no-repeat (без повторения) на repeat-x (повторение по горизонтали).

Header { display: block; height: 405px; background: url(images/header-bg.png) repeat-x center bottom; }

Рис. 6.5. Фоновая картинка для шапки

В формате PNG-24 файл с фоном размером 1325х405 пикселов занимает около 32 Кб, а в PNG-8 с 256-цветовой палитрой, где качество градиента несколько хуже - около 15 Кб. Можно разбить фон на две составные части - градиент и картинку и сохранить каждое изображение в своём формате, что должно привести к повышению качества отображения градиента. Впрочем, 32 Кб для столь большого изображения это немного и дополнительную оптимизацию кто-то посчитает «экономией на спичках». Тем не менее, альтернативный подход к созданию шапки сайта кому-то окажется полезным, а при желании вы можете его пропустить.

Оптимизация шапки

Поскольку градиент в шапке повторяется по горизонтали, его можно вырезать из макета и установить как фоновую картинку. На рис. 6.6 показан градиент высотой 405 пикселов, подготовленный для этой цели. Формат PNG-24 не вносит искажения в изображение, а градиенты хорошо сжимает (итоговый объем 402 байта), так что в этом случае однозначно следует использовать именно его. Рамка вокруг рисунка добавлена для наглядности.

Рис. 6.6. Градиентный рисунок (header-gradient.png)

Картинка с силуэтными животными делается на прозрачном фоне и высотой 198 пикселов, нет смысла делать её на всю высоту шапки, поскольку она занимает лишь часть. Фрагмент изображения показан на рис. 6.7. Шахматное поле означает прозрачность.

Рис. 6.7. Фоновая картинка с прозрачностью (header-animal.png)

Поскольку сохранение этой картинки идет в формате PNG-8, у которого только один уровень прозрачности, в отличие от 256 уровней формата PNG-24, важно обеспечить корректное наложение на градиентный фон. Для этого при сохранении в Photoshop-е надо указать цвет краёв (Matte) близкий к средней части градиента, где идёт наложение силуэта. Примерно это цвет #9de1f0. В этом случае не возникнет грязных контуров вокруг деревьев и животных, а картинка при наложении на градиент будет восприниматься как единое целое.

Два рисунка для фона шапки подготовлены, пишем код HTML.

И стиль для элемента и слоя header-bg .

Header { background: #00b0d8 url(images/header-gradient.png) repeat-x; } .header-bg { background: url(images/header-animal.png) repeat-x center bottom; height: 405px; }

В итоге объем файлов оказался 12,5 Кб, что даже меньше ожидаемого.

Название сайта

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

Использовать формат PNG-24 при сохранении прозрачности.

Сохранить рисунок в формате GIF или PNG-8 с фрагментом градиента, а затем наложить рисунок на градиент так, чтобы совпадение было с точностью до пиксела.

Очевидно, что второй способ имеет ряд недостатков - изображение нельзя сдвинуть даже на пару пикселов, оно привязано к градиенту, и если его градиент изменить, придётся менять и картинку. Так что сохраняем заголовок в формате PNG-24. Код HTML останется прежним, а стили расширятся.

Header { background: #00b0d8 url(images/header-gradient.png) repeat-x; } .header-bg { background: url(images/header-animal.png) repeat-x center bottom; height: 405px; /* Высота шапки */ text-align: center; /* Выравнивание по центру */ } .header-bg img { position: relative; /* Относительное позиционирование */ top: 40px; /* Сдвигаем картинку вниз */ }

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

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

Значение / у атрибута href указывает на главную страницу и работает только на веб-сервере, но никак не локально.

Окончательный код для шапки приведён в примере 6.14.

Пример 6.14. Шапка сайта

HTML5 CSS 2.1 IE Cr Op Sa Fx

Как поймать льва в пустыне? body { margin: 0; } header { display: block; background: #00b0d8 url(images/header-gradient.png) repeat-x; /* Градиент */ } .header-bg { background: url(images/header-animal.png) repeat-x center bottom; /* Животные */ height: 405px; /* Высота шапки */ text-align: center; /* Выравнивание по центру */ } .header-bg img { position: relative; /* Относительное позиционирование */ top: 40px; /* Сдвигаем картинку вниз */ }

Зачастую вроде бы простые задачи верстки требуют сложной структуры HTML-разметки и использования CSS-трюков. Центрирование элементов или выравнивание контента может быть очень утомительным. Одна из таких задач - это выравнивание элементов верхней части сайта так, чтобы логотип был слева, а пункты меню - справа. Можно использовать float и position:absolute, а для выравнивания по вертикали - добавлять margin и padding разным элементам. Вроде бы ничего сложного. Но если сайт должен корректно отображаться и на мобильных устройствах, возникает много проблем.

Ниже описан лаконичный способ решения этой проблемы.

HTML-разметка максимально проста:

Super Bad First LinkSecond LinkThird Link

Высота шапки фиксированная, добавляем text-align: justify , для дочерних элементов:

Header { text-align: justify; letter-spacing: 1px; height: 8em; padding: 2em 10%; background: #2c3e50; color: #fff; }

Добавляем display: inline-block для всех элементов nav , чтобы можно было расположить их друг за другом:

Header h1, header nav { display: inline-block; }

Чтобы атрибут text-align: justify работал, как мы хотим, нужно использовать небольшой трюк с псведоэлементами, который был найден в статье Perfectly justified CSS grid technique using inline-block , автор Jelmer de Maat:

Header::after { content: ""; display: inline-block; width: 100%; }

В итоге получилось выравнивание по горизонтали, без использования float и position:absolute . Теперь необходимо выравнивание элементов по вертикали. При использовании vertical-align для элементов nav будет зависимость от высоты родительского блока - шапки. А это не очень правильно. Примеры использования vertical-align: top и vertical-align: middle на jsbin. Ниже представлен возможно наиболее удобный способ вертикального выравнивания.

Используем снова псевдоэлементы. используя пример из статьи Centering in the Unknown , упомянутый Michał Czernow:

Header h1 { height: 100%; } header h1::before { content: ""; display: inline-block; vertical-align: middle; height: 100%; }
В результате получается то, что нужно:

Осталось решить две задачи: корректное отображение при большом количестве текста в шапке и адаптивность. Если заголовок сайта будет слишком длинный, верстка начнет съезжать:

Используем трюк с псевдоэлементом на header :

CSS-код

header { text-align: justify; height: 15em; padding: 2em 5%; background: #2c3e50; color: #fff; } header::after { content: ""; display: inline-block; width: 100%; } header > div, header nav, header div h1 { display: inline-block; vertical-align: middle; } header > div { width: 50%; height: 100%; text-align: left; } header > div::before { content: ""; display: inline-block; vertical-align: middle; height: 100%; }

Выглядит намного лучше:

Теперь перейдем к адаптивности. Есть несколько способов решения этой задачи, можно просто не задавать высоту шапке, и все внутренние элементы будут адаптивны высоте. При этом не потребуется второй трюк с псевдоэлементами, живой пример на jsbin.

CSS-код

header { text-align: justify; padding: 2em 5%; background: #2c3e50; color: #fff; } header::after { content: ""; display: inline-block; width: 100%; } header h1, header nav { display: inline-block; vertical-align: middle; } header h1 { width: 50%; text-align: left; padding-top: 0.5em; } header nav { padding-top: 1em; }

Если же необходимо задать высоту шапки, то придется использовать и второй трюк с псевдоэлементами, и добавлять media query для экранов разных размеров:

@media screen and (max-width: 820px){ header { height: auto; } header > div, header >

Результат адаптивен и на мобильных устройствах выглядит так:

В примере используется 820px для наглядности, на живом сайте значение конечно должно быть другое, в соответствии с требованиями. Для поддержки Internet Explorer 8 необходимо вместо “::” использовать “:” для псевдоэлементов.

Финальный CSS-код

@import url(http://fonts.googleapis.com/css?family=Lato:400,700italic); * { padding: 0; margin: 0; } body { background: #1abc9c; font-family: "Lato", sans-serif; text-transform: uppercase; letter-spacing: 1px;} header { text-align: justify; height: 8em; padding: 2em 5%; background: #2c3e50; color: #fff; } header::after { content: ""; display: inline-block; width: 100%; } header > div, header > div::before, header nav, header > div h1 { display: inline-block; vertical-align: middle; text-align: left; } header > div { height: 100%; } header > div::before { content: ""; height: 100%; } header > div h1 { font-size: 3em; font-style: italic; } header nav a { padding: 0 0.6em; white-space: nowrap; } header nav a:last-child { padding-right: 0; } @media screen and (max-width: 720px){ header { height: auto; } header > div, header > div h1, header nav { height: auto; width: auto; display: block; text-align: center; } }

Результат: