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

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

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

То есть пока получается примерно следующая страница:

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

Далее, чтобы переместить блок сайдбара влево по отношению к блоку основного содержимого и получить эффект обтекания, нам надо указать у блока сайдбара свойство float: left и предпочтительную ширину. Ширина может быть фиксированной, например, 150 px или 8 em. Либо также можно использовать проценты, например, 30% - 30% от ширины контейнера body. С одной стороны, блоками с фиксированной шириной легче управлять, но с другой процентные значения ширины позволяют создавать более гибкие, резиновые блоки, которые изменяют размеры при изменении размеров окна браузера.

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

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

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

#sidebar{ background-color: #ddd; float: left; width: 150px; } #main{ background-color: #eee; height: 200px; margin-left: 170px; /* 150px (ширина сайдбара) + 10px + 10px (2 отступа) */ }

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

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

Создание правого сайдбара будет аналогично, только теперь нам надо установить у сайдбара значение float: right , а у блока основного содержимого - отступ справа:

#sidebar{ background-color: #ddd; float: right; width: 150px; } #main{ background-color: #eee; height: 200px; margin-right: 170px; }

При этом разметка html остается такой же, блок сайдбара по прежнему должен предшествовать блоку основного содержимого.

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

Модульная сетка, по сути, – это некая визуальная абстракция, визуальное деление страницы на равные по ширине столбцы с равными отступами между ними. Визуализировать данную модель можно посредствам направляющих или отдельного слоя, на котором будут изображены эти столбцы. Именно такое решение вы найдёте в шаблонах сетки 960gs.

По основам веб-дизайна и прототипированию неплохим подспорьем может стать данная книга: Джейсон Берд: Веб-дизайн. Руководство разработчика .

Разработка

Итак, процесс дизайна макета страницы плавно перетекает в процесс «оживления» сделанного на предыдущих этапах. Прежде чем сразу начинать писать HTML, CSS и JS стоит немного поговорить о редакторах кода и структуре проекта.

Редакторы кода

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

SMACSS

Так же существует подход SMACSS (расшифровывается данный акроним как Scalable and Modular Architecture for CSS – Масштабируемая и Модульная Архитерктура для CSS), который разделяет понятие о классах и разметке на несколько уровней: базовый, макет, модуль, состояние, тема.

• К базовому уровню будет относиться всё, что касается непосредственно тэгов html.
• К уровню макета мы будем относить всё, что касается основных составляющих страницы: секции.
• К уровню модуль мы будем относить всё, что касается переиспользуемых элементов страницы: баннеры, навигация, списки, блоки информации и пр.
• Уровень Состояние описывает как будут выглядеть модули и секции в том или ином состоянии: отображаются или не отображаются, сжатые или раскрытые, активны или неактивны и пр.
• Уровень темы чем-то схож с уровнем Состояния и отражает как модули или секции могут выглядеть.

В данном подходе используются следующие соглашения по именованию. Уровни определяются при помощи префиксов и соответствующего буквенного обозначения:

• Макет: .l- или .layout-
• Так как модули составляют основную часть проекта именовать их, используя префикс module- избыточно. Поэтому для них используются имена как есть, например: .example { }, .afisha {} и пр.
• Состояния имеют префикс .is- , например .is-hidden {}
• Уровень Темы именуется подобно модулям.

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

Информация о методологии и онлайн книга: https://smacss.com/
Русскоязычный перевод книги по SMACSS: https://github.com/andrew--r/smacss

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

Небольшой курс по основам HTML:

Написание CSS

Правила именования классов подводят нас к следующему этапу. Когда написана html структура проекта, определены классы можно переходить к написанию CSS стилей и нарезке макета.

Стоит упомянуть о 2-х CSS файлах-дополнениях: normalize.css и reset.css.

Reset.css

Изначально в проектах повсеместно использовался reset.css , написанный Эриком Мейером. Цель данного свода правил – сбросить стили браузера, которые он по умолчанию использует для отображения элементов разметки. Таким образом при использовании reset.css нам не нужно переписывать стили браузера, по сути мы работаем с «чистым листом» и можем сосредоточиться на написании собственных стилей с нуля.

Возвращаясь к Mobile First, стоит сказать, что при работе в данной концепции написание стилей стоит начинать с мобильной версии, а затем с помощью медиа запросов добавлять правила, которые будут работать на других разрешениях. Зачастую, при расширении правил от мобильной версии к десктопной, приходится писать гораздо меньше кода, чем при работе наоборот: от десктопной версии к мобильной.

Опять-таки, возвращаясь к теме Mobile First, нельзя не упомянуть о 2-х концепциях, которые коррелируют с данной техникой. Progressive Enhacement и Graceful Degradation, что переводится как прогрессивное улучшение и последовательное ухудшение. Данные принципы описывают 2 разных подхода к разработке: в первом случае мы разрабатываем наш сайт, пишем скрипты с учётом старых браузеров и систем или же определяем поведение при невозможности запуска скриптов, а затем постепенно улучшаем скрипт, вводя современные функции и методы, таким образом мы получаем сайт, который будет одинаково хорошо работать в старых и новых браузерах и средах (то же касается и css).

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

Подход Mobile First чем-то схож с Progressive Enhacement.

Проверка кода

После написания html, css и js для нашей страницы необходимо проверить всё ли сделано верно. Для этого можно использовать online средства:

Командная строка

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

Mkdir project && cd project && mkdir css && touch css/styles.css && mkdir images && mkdir js && touch js/app.js && touch index.html
После нажатия enter мы получим папку project в которой будут находиться папки css, images, js, в папках css и js файлы styles.css и app.js, соответственно, а в корне project лежать файл index.html. Таким образом мы сэкономили время на создание папки, написание её названия, создание файлов и пр. Так же командная строка используется для работы с остальными средствами автоматизации.

Так же многие сервисы вроде autoprefixer (автоматическая простановка браузерных префиксов), jshint (проверка JS кода на валидность) могут быть установлены как сторонние плагины в текстовом редакторе (Sumblime Text, Atom, Brackets) и инициализированы при нажатии определённого сочетания клавиш.

Bootrstrap, Foundation, Material Design Lite

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

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

Со всеми возможностями и примерами можно ознакомиться на соответствующих сайтах:

• Bootstrap: http://getbootstrap.com/
• Foundation: http://foundation.zurb.com/
• Material Design Lite: http://www.getmdl.io/

Данное описание не является исчерпывающим и представляет собой лишь поверхностный взгляд на некоторые технологии. Но прежде чем пускаться во все тяжкие, используя средства автоматизации, библиотеки, framework"и, готовый код и прочее, стоит, всё-таки, изучить основы работы с html, css и js.

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

Теги:

• html
• css
• веб-дизайн

Добавить метки

В данном уроке мы будем создавать макет страницы для веб - сайта.

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

Шаг 2 . Черпая вдохновение из различных современных проектов веб - сайтов, мы и создадим это новую страницу - раскладку для веб - сайта.
Ключевые особенности нашей веб - страницы будут заключаться в горизонтальных полосах, так называемых «группах»: они нам нужны для того, чтобы разместить содержание нашей веб - странички в определенных областях: красочная область заголовка - шапка страницы, будет представлять один участок; дружественное приветственное обращение с примерами работ - другую часть; и, основная часть и ресурс, заполнят нижний колонтитул (нижнюю сноску).

Шаг 3. Работа над любым проектом должна начинаться с эскиза на бумаге.
При помощи карандаша можно приблизительно или детально создать план будущего расположения частей веб - странички на бумаге.

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

Шаг 5. Создайте новый документ. Будет лучше, если Вы сделаете новый документ размером, соответствующим размеру широкоэкранного монитора, чтобы лучше представить, как будет выглядеть Ваша веб - страничка на широком экране. Например, создайте новый документ шириной - 1680 пикс., высотой - 1050 пикс .

Шаг 6. Воспользуйтесь инструментом Guides «Направляющие» и разместите эти направляющие линии в центре Вашего нового документа. Ширина направляющих составляет приблизительно 960 пикс . С помощью этих направляющих, мы создадим основную сетку, для того, чтобы впоследствии нам было удобнее зрительно расположить основные пункты нашей веб - страницы.

Шаг 7. Начните работу с создания полосы заголовка: создайте новый слой, выберите инструмент Rectangular Marquee Tool «Прямоугольное выделение» , на новом слое нарисуйте выделение, похожее на то, что приведено на рисунке ниже и залейте созданное выделение белым цветом.

Далее, войдите в палитру Layer Style «Стили слоя» , и добавьте стиль слоя Gradient Overlay «Наложение градиента» , цвет градиента выберите от основного к фоновому (от черного к белому) и отрегулируйтеOpacity «Непрозрачность» на Ваше усмотрение, чтобы эффект градиента получился не очень темным. После всех манипуляций нажмите «Да» , чтобы применить эффект Gradient Overlay «Наложение градиента» . Градиент рисуйте линейного типа.

Шаг 8. Теперь снова создайте новый слой и инструментом Rectangular Marquee Tool «Прямоугольное выделение» нарисуйте область выделения, чуть больше предыдущей: здесь будет располагаться изображаемое содержимое, и в палитре Layer Style «Стили слоя» добавьте эффект Gradient Overlay «Наложение градиента» . Цвет градиента выберите двух ярких цветов (на Ваше усмотрение); тип градиента: Linear «Линейный» . Для того, чтобы добавить немного глубины этому новому слою, в эффектах Layer Style «Стили слоя» войдите в графу Inner Shadow «Внутренняя тень» и на Ваше усмотрение установите параметры тени.

Шаг 9. По желанию: легкая текстура может слегка освежить наш проект веб - страницы. После того, как к нарисованной прямоугольной области Вы применили эффект Gradient Overlay «Наложение градиента» из стилей слоя, Вы можете к этому прямоугольнику применить фильтр: Filter> Noise> Add Noise (Фильтр - Шум - Добавить шум) и режим наложения поставьте Multiply «Умножение» .
(если после применения данного фильтра «шума» не видно, попробуйте отключить видимость эффекта Gradient Overlay «Наложение градиента» в палитре Layer «Слои» ).

Шаг 10. Добавьте логотип (фирменный знак) компании в той позиции на экране, согласно Grid «Сетке» - «Направляющим» , затем добавьте к данному фирменному знаку стиль Gradient Overlay «Наложение градиента» и Inner Shadow «Внутреннюю тень» из команды Layer Style «Стили слоя» . Внутреннюю тень сделайте очень мягкой.

Шаг 11. Используйте инструмент Type «Текст» для того, чтобы создать надпись для главной навигации. Установите курсор инструментаType «Текст» в середине серой полосы с градиентом и напишите необходимый Вам текст более темным цветом, чем цвет фона-градиента полоски, на которой пишите.

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

Шаг 13. Продолжайте к заголовку добавлять детальные пояснения, но, на этот раз, используя шрифты Arial или Helvetica .

Шаг 14. Разместите необходимую Вам иллюстрацию (в нашем случае это будет иллюстрация портативного компьютера). Также, на экране нашего портативного компьютера мы можем разместить примеры работ. Некоторые примеры Вы можете найти на этой ссылке: range of examples can be found here

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

Шаг 16. Создайте новый слой и на нем, под двуцветной центральной частью с иллюстрацией снова нарисуйте небольшую прямоугольную область и заполните ее серо-белым градиентом.

Шаг 17. Разделите среднюю часть страницы на две колонки инструментом Guides «Направляющие» относительно линий сетки. В левой части будет размещен основной текст, а в правой части - дополнительная информация, касающаяся Вашей веб - страницы. Используйте инструмент Type «Текст» , чтобы создать надпись в этих двух колонках. Размер и тип шрифта (кегль и гарнитуру) выберите таким образом, чтобы текст был легко читаем.

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

Шаг 19. Создайте новый слой. На нем инструментом Rounded Rectangle Tool «Прямоугольник со скругленными углами» нарисуйте именно такой прямоугольник - со скругленными углами. Рисуем в режиме «Выполнить заливку пикселов» на панели свойств, удерживая при рисовании клавишу < Shiht> для того, чтобы прямоугольник получился пропорциональным. Цвет прямоугольнику задаем серый.

Шаг 20. После того, как наш прямоугольник нарисован, нам нужно добавить к нему линейный серо-белый градиент, тонкую серую обводку и мягкую внутреннюю тень. Все это мы делаем при помощи команды Layer Style «Стили слоя» , которая расположена в нижней части палитрыLayer «Слои» .

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

Шаг 22. В нижней части серого прямоугольника на новом слое нарисуйте другой прямоугольник со скругленными углами: он будет выполнять роль «кнопки» на Вашей веб - странице. К этому прямоугольнику добавьте такие Layer Style «Стили слоя» , как: наложение градиента и обводку серого цвета. Эти Layer Style «Стили слоя» мы добавляем для того, чтобы наша «кнопка» выглядела эффектно и стилизованно.

Шаг 23. Напишите на «кнопке» необходимый Вам текст (метку), который будет подсказывать пользователям, каким образом можно дальше продолжать просматривать через веб - страницу очередные проекты.

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

Шаг 25. Инструментом Elliptical Marquee Tool «Овальное выделение» на новом слое нарисуйте длинный и узкий эллипс и заполните это выделение радиальной градиентной заливкой цветом от черного к прозрачному. При активном слое с нарисованным эллипсом, нажмите комбинацию клавиш < Ctrl+ T> , либо: Edit> Transform> Scale (Редактирование - Трансформирование - Масштабирование ) для того, чтобы созданный эллипс масштабировать в длинный и тонкий эллипс, похожий на тень.

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

Шаг 27. Область нижнего колонтитула содержит достаточно свободного места для размещения вторичных элементов страницы. Одним из таких элементов может стать «Область клиентского логина» . Для того,чтобы создать данную область, активизируйте инструмент Type «Текст» , создайте два (или несколько) текстовых рамок, внутри которых и разместите Ваш текст: логин; пароль.
Созданным текстовым рамкам можно придать небольшую мягкую тень, используя функцию: Layer Style «Стили слоя» .

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

Шаг 29. Теперь, добавьте контактную информацию крупным читаемым шрифтом.

Шаг 30. В итоге, после всей проделанной работы, у нас получилась интересная веб - страничка. Все элементы четко расположены на странице, все удобочитаемо и красиво!

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

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

1. Как разбить макет страницы на секции

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

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

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

Мы не будем использовать элемент

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

Элементы

,

и