Вёрстка веб-страниц. Что такое верстка? Верстка слоями: преимущества, недостатки, сфера применения

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

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

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

Вёрсткой веб-страниц занимаются верстальщики. В общем случае в задачу верстальщика входят:

• создание кода веб-страницы с помощью соответствующего языка разметки . Таковыми могут быть, например, HTML , XHTML , XML .
• оформление ранее созданного кода страницы с помощью встроенных средств языка разметки, либо же с помощью каскадных таблиц стилей CSS

При этом он часто пользуется следующим ПО:

• текстовый редактор или редактор HTML для написания и редактирования кода
• графическая программа для так называемой «нарезки» графического макета, полученного верстальщиком от веб-дизайнера

А также иногда прибегает к помощи:

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

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

• Книжная
• Газетно-журнальная
• Верстка веб-документов

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

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

При верстке веб-страниц можно выделить два основных метода:

• Табличная верстка
• Блочная верстка

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

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

Блочная верстка является основной в среде веб-разработчиков. В блочной верстке каркас документа состоит из тегов . Главным ее преимуществом является концепция семантической верстки, т. е. разделение содержимого и оформления.

Небольшой пример кода:

Табличная верстка

Код блочной верстки

Результат получается одинаковый:

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

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

• Notepad++
• Macromedia Dreamweaver
• Microsoft FrontPage
• CoffeeCup HTML Editor
• NetBeans

Редакторы html-страниц разделяют на обычные и визуальные. Используя визуальный редактор, сверстать страницу сможет даже неопытный пользователь. Но стоит понимать, что визуальный редактор дописывает много лишнего кода (мусора) и лишает верстальщика возможности использовать гибкость языка html на 100%.

Основная проблема при верстке сайтов - не одинаковое отображение одного и того же документа в разных браузерах. Сверстав качественно страницу для Firefox, она может отображаться немного по-другому в Opera, и полностью разъехаться в Internet Explorer.

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

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

Уважаемый читатель, этой статьей я открываю цикл статей, посвященных вёрстке.
В первой части будет описано, как это сделать с помощью стандартных средств на чистом HTML и CSS. В последующих частях рассмотрим как сделать тоже самое, но с помощью современных фреймворков и CMS.

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

• Создаем папку с названием нашего проекта, например Whitesquare.
• В ней создаем пустой файл index.html.
• В папке проекта создаем папку css с пустым файлом styles.css.
• В папке проекта создаем пустую папку images.

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

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

Сохраним логотипы следующим образом:
/images/logo.svg?9
/images/footer-logo.png

В качестве пустых картинок из макета будем использовать однопиксельное серое изображение, которое будем растягивать по необходимости
/images/ sample.png

Повторяющиеся фоновые изображения необходимо вырезать минимальным кусочком достаточным для образования полного изображения повторением по вертикали и горизонтали.
/images/bg.png
/images/h1-bg.png

Иконки социальных сетей с одинаковыми размерами удобно сохранить в один файл и использовать как спрайты для более быстрой загрузки. Для этого можно склеить картинки вручную в Photoshop, а можно сначала нарезать по одной, а затем склеить с помощью специально сервиса, например http://ru.spritegen.website-performance.org . В итоге получится два файла:
/images/social.png
/images/social-small.png

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

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

Основной цвет фона примерно соответствует цвету #f8f8f8. Он будет показан в случае, если фоновая картинка не загрузится. Наверху страницы находится серая дизайнерская полоска. Применим ее через свойство border для body.

Основным шрифтом является тот шрифт, которым написан текст в области контента. Чтобы узнать его стили нужно выделить его в Photoshop’е и посмотреть свойства шрифта. В данном случае это Tahoma 12px с цветом #8f8f8f. Так же в этом макете параграфы имеют увеличенные отступы.

Прописываем все эти стили в styles.css:

Body { color: #8f8f8f; font: 12px Tahoma, sans-serif; background-color: #f8f8f8; border-top: 5px solid #7e7e7e; margin: 0; } input { background-color: #f3f3f3; border: 1px solid #e7e7e7; height: 30px; color: #b2b2b2; padding: 0 10px; vertical-align: top; } button { color: #fff; background-color: #29c5e6; border: none; height: 32px; font-family: "Oswald", sans-serif; } p { margin: 20px 0; }

В дальнейшем мы все стили будем писать в этот же файл, поэтому будем называть его просто «стили».

Whitesquare

Здесь мы указываем, что используем разметку HTML5, кодировку utf-8, страница называется Whitesquare. Также подключаем наш файл стилей и внешний файл со стилями шрифтов.
В последнем блоке в секции head мы подключаем специальный скрипт, который позволяет поддерживать Html5 теги в браузерах Internet Explorer меньше 9 версии. Мета-тег X-UA-Compatible сообщает, что в случае использования браузера Internet Explorer, он должен отразить сайт самым современным способом.

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

Опишем это в теге body:

Wrapper используется для объединения блоков и их выравнивания по центру страницы.

Затем укажем стили блоков:

Вставляем логотип в тег header:

Дополнительных стилей не требуется.

Вставляем форму поиска в тег header:

… GO

И стили выравнивания по правому краю для нее:

Form { float: right; }

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

• HOME
• ABOUT US
• SERVICES
• PARTNERS
• CUSTOMERS
• PROJECTS
• CAREERS
• CONTACT

CSS стили для него будут следующие:

Nav a { text-decoration: none; } nav ul { margin: 0; padding: 0; } nav li { list-style-position: inside; font: 14px "Oswald", sans-serif; padding: 10px; } .top-menu li { display: inline-block; padding: 10px 30px; margin: 0; } .top-menu li.active { background: #29c5e6; color: #fff; } .top-menu a { color: #b2b2b2; }

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

Заголовок страницы помещается в div с идентификатором heading

ABOUT US

Заголовок имеет следующие стили:

#heading { background: transparent url(../images/h1-bg.png); margin: 30px 0; padding-left: 20px; } h1 { display: inline-block; color: #7e7e7e; font: 40px/40px "Oswald", sans-serif; background: url(../images/bg.png); margin: 0; padding: 0 10px; }

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

Aside { float: left; width: 250px; } section { margin-left: 280px; padding-bottom: 50px; }

Здесь мы задали фиксированную ширину 250 пикселей для сайдбара, прибили его к левому краю и отодвинули колонку с контентом вправо на 280 пикселей от левого края. Также добавили отступ у контента снизу.

Подменю создаем аналогично главному меню. Для этого в теге aside прописываем следующее:

• LOREM IPSUM
• DONEC TINCIDUNT LAOREET
• VESTIBULUM ELIT
• ETIAM PHARETRA
• PHASELLUS PLACERAT
• CRAS ET NISI VITAE ODIO

И применяем к подменю следующие стили:

Aside-menu li { font-weight: 300; list-style-type: square; border-top: 1px solid #e7e7e7; } .aside-menu li:first-child { border: none; } .aside-menu li.active { color: #29c5e6; } .aside-menu a { color: #8f8f8f; }

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

В html это выглядит так:

OUR OFFICES

В стилях укажем шрифты, цвета и отступы:

Aside > h2 { background: #29c5e6; font: 14px "Oswald", sans-serif; color: #fff; padding: 10px; margin: 30px 0 0 0; } aside > p { background: #f3f3f3; border: 1px solid #e7e7e7; padding: 10px; margin: 0; }

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

Добавим код цитаты в раздел section

“QUISQUE IN ENIM VELIT, AT DIGNISSIM EST. NULLA UL CORPER, DOLOR AC PELLENTESQUE PLACERAT, JUSTO TELLUS GRAVIDA ERAT, VEL PORTTITOR LIBERO ERAT.”

И применим для него стили:

Blockquote { margin: 0; background: #29c5e6; padding: 10px 20px; font-family: "Oswald", sans-serif; font-weight: 300; } blockquote p { color: #fff; font-style: italic; font-size: 33px; margin: 0; } blockquote cite { display: block; font-size: 20px; font-style: normal; color: #1d8ea6; margin: 0; text-align: right; }

Здесь нет ничего нового, так же - шрифты, фоны и отступы.

Lorem ipsum dolor sit amet…

Donec vel nisl nibh…

Donec vel nisl nibh…

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

Которому зададим следующие стили:

Figure { display: inline-block; margin: 0; font-family: "Oswald", sans-serif; font-weight: 300; } figure img { display: block; border: 1px solid #fff; outline: 1px solid #c9c9c9; } figure figcaption { font-size: 16px; font-weight: 300; margin-top: 5px; } figure figcaption span { display: block; font-size: 14px; color: #29c5e6; } section > figure + figure { margin-left: 28px; }

Здесь мы убрали стандартные отсупы у figure, отобразили его как инлайновый блок и применили нужный шрифт. Изображение отображаем как блочный элемент с белой рамкой. Вторую серую рамку можно сделать через css-свойство outline. Самое интересное находится в последнем правиле, которое задает левый отступ у всех figure кроме первого внутри тега section.

При верстке этого блока добавим сначала заголовок:

OUR TEAM

Со стилем:

Section > h2 { background: #29c5e6; font: 30px "Oswald", sans-serif; font-weight: 300; color: #fff; padding: 0 10px; margin: 30px 0 0 0; }

А затем два блока-строки с карточками сотрудников

John Doeceo Saundra Pittsleyteam leader … Ericka Nobrigaart director Cody Roussellesenior ui designer …

Таким образом, карточка (figure) состоит из фотографии (img), подписи (figcaption) с именем сотрудника и его должностью (div). Карточки будут иметь следующие стили:

Figure figcaption { font-size: 16px; font-weight: 300; margin-top: 5px; } figure div { font-size: 14px; color: #29c5e6; } .team-row figure { margin-top: 20px; } .team-row figure + figure { margin-left: 43px; }

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

Для начала создадим контейнер футера с этим блоками:

И применим к нему оформление:

Footer { background: #7e7e7e; color: #dbdbdb; font-size: 11px; } #footer { max-width: 960px; margin: auto; padding: 10px 0; height: 90px; }

Контейнер с id=”footer” находится внутри тега footer, это даёт нам возможность через тег footer задать серую область по всей ширине экрана, а через внутренний div отцентрировать с максимальной шириной 960 пикселей. Также этот div задает обоим блокам высоту 90 пикселей.

TWITTER FEED 23 oct

In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug

Footer h3 { font: 14px "Oswald", sans-serif; color: #fff; border-bottom: 1px solid #919191; margin: 0 0 10px 0; } #twitter time a { color: #b4aeae; } footer p { margin: 5px 0; } #twitter { float: left; width: 300px; } #twitter p { padding-right: 15px; }

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

SITEMAP Home About Services Partners Support Contact

Footer a { color: #dbdbdb; } #sitemap { width: 150px; float: left; margin-left: 20px; padding-right: 15px; } #sitemap div { display: inline-block; } #sitemap div + div { margin-left: 40px; } #sitemap a { display: block; text-decoration: none; font-size: 12px; margin-bottom: 5px; } #sitemap a:hover { text-decoration: underline; }

Вставляем набор ссылок в контейнер

SOCIAL NETWORKS

И стилизуем их:

#social { float: left; margin-left: 20px; width: 130px; } .social-icon { width: 30px; height: 30px; background: url(../images/social.png) no-repeat; display: inline-block; margin-right: 10px; } .social-icon-small { width: 16px; height: 16px; background: url(../images/social-small.png) no-repeat; display: inline-block; margin: 5px 6px 0 0; } .twitter { background-position: 0 0; } .facebook { background-position: -30px 0; } .google-plus { background-position: -60px 0; } .vimeo { background-position: 0 0; } .youtube { background-position: -16px 0; } .flickr { background-position: -32px 0; } .instagram { background-position: -48px 0; } .rss { background-position: -64px 0; }

Здесь мы применили технику спрайтов – когда один файл с изображением применяется для разных картинок. Все ссылки разделились на большие иконки (.social-icon) и маленькие (.social-icon-small). Мы задали этим классом отображение в виде инлайнового блока с фиксированными размерами и одинаковым фоном. А затем с помощью css сдвинули этот фон так, чтобы на каждой ссылке отобразилось соответствующее изображение.

Блок с копирайтом и логотипом – это картинка со ссылкой и параграф с текстом под ним.

Copyright 2012 Whitesquare. A pcklab creation

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

#footer-logo { float: right; margin-top: 20px; font-size: 10px; text-align: right; }

На этом наши работы закончены. Готовый проект можно скачать