Что такое верстка в программировании. Что такое верстка и кто такой верстальщик? Пример блочной вёрстки


Приветствую Вас, уважаемые посетители сайт! Данным постом я хочу продолжить серию уроков под названием «Путь веб-мастера». Для того, чтобы все было понятно в последующих уроках, нужно сначала освоить предыдущие, а именно — и . После изучения html и css нам нужно как-то использовать их в создании сайта. Поэтому следующим нашим шагом будет.

Что такое ? Верстка сайта — это процесс создания веб-страницы по готовому макету. Обычно в качестве макета используется графический шаблон, созданный в программе Adobe Photoshop, он называется PSD (PhotoShop Document) шаблоном. Процесс верстки включает в себя создание кода страницы при помощи понятного браузерам языка разметки гипертекста (html), и оформление её с помощью каскадных таблиц стилей (CSS).
Существует два способа верстки страниц:

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

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

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

Но при этом не нужно злоупотреблять данным тегом. Списки оформляются тегом

    или , таблицы — , заголовки и так далее. Здесь уже речь идет о «семантической верстке».

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

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

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

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

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

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

    Так что впереди много интересной работы, до встречи!

    Сов. перех. см. свёрстывать Толковый словарь Ефремовой. Т. Ф. Ефремова. 2000 … Современный толковый словарь русского языка Ефремовой

    Сверстать, сверстаю, сверстаем, сверстаешь, сверстаете, сверстает, сверстают, сверстая, сверстал, сверстала, сверстало, сверстали, сверстай, сверстайте, сверставший, сверставшая, сверставшее, сверставшие, сверставшего, сверставшей, сверставшего,… … Формы слов

    сверстать - сверст ать, аю, ает … Русский орфографический словарь

    сверстать - (I), сверста/ю, та/ешь, та/ют … Орфографический словарь русского языка

    Аю, аешь; свёрстанный; тан, а, о; св. (нсв. также верстать). что. Типогр. Расположить набор и иллюстрации по страницам в соответствии с форматом и оформлением издания. С. газету, журнал. ◁ Свёрстывать, аю, аешь; нсв. Свёрстываться, ается; страд … Энциклопедический словарь

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

    сверстать - с/верст/а/ть … Морфемно-орфографический словарь

    СВЕРСТЫВАТЬ, сверстать что, у(по, вы, с)ровнять или равнять, приводить в одну меру с чем, убавляя и прибавляя, по надобности. Сверстать бугры, кочки, срезать, снять по уровню. Сверстать тычины палисадника, урезать все в одну меру. Сверстать кого… … Толковый словарь Даля

    СВЁРСТЫВАТЬ, свёрстываю, свёрстываешь, несовер. 1. (совер. сверстать) что. То же, что верстать в 1 знач. (тип.). 2. несовер. к сверстать во 2 знач. (устар. и обл.). Толковый словарь Ушакова. Д.Н. Ушаков. 1935 1940 … Толковый словарь Ушакова

    Книги
    • Все про TEX , Дональд Э. Кнут , 560 стр. Эта книга посвящена компьютерной системе TeX, так же, как книга Все про MetaFONT посвящена MetaFONT. TeX и MetaFONT очень дружны между собой и не намерены расставаться еще очень… Категория: Разное Издатель: ИЗДАТ. ДОМ ВИЛЬЯМС , Производитель: ИЗДАТ. ДОМ ВИЛЬЯМС ,
    • Азбука профессий. Книжных дел мастера , Дональд Э. Кнут , Книга, предназначена для всех, кто интересуется процессом создания печатных изданий - от макета до переплета. Мы не претендуем на полное изложение основ допечатной подготовки или переплетного… Категория:

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

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

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

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

    Предварительный осмотр После создания структуры файлов открываем psd файл в Photoshop. Важно внимательно осмотреть шаблон и оценить его. Нам нужно понять следующие вещи:
    • Как будут нарезаться изображения?
    • Какими будут основные стили?
    • Какой макет у нас получится?

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

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

    Сохраним логотипы следующим образом:
    /images/logo.png
    /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.

    Основные стили И только теперь можно начинать писать код. Но начнем мы это делать не с привычного HTML, а с переноса правил в CSS.

    На данном этапе желательно перенести все визуальные стили из дизайна в 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; }

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

    Каркас HTML И вот, наконец, мы можем попрактиковаться в написании HTML кода. Запишем в index.html следующее:

    Whitesquare

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

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

    Макет В данном случае, мы видим, что сайт состоит из двух колонок: основного контента и сайдбара. Над ними находится шапка (header), в которой располагаются три горизонтальных блока: логотип с поиском, меню и название страницы. В самом низу под колонками располагается серый горизонтальный блок футера (footer).

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

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

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

    Логотип

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

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

    Поиск

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

    … GO

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

    Form { float: right; }

    Меню

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

    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 прописываем следующее:

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

    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.”

    John Doe, Lorem Ipsum

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

    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»

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

    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; }

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

    Вёрстка страницы представляет собой процесс разработки структуры 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. Разметка подвала страницы

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

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

    Определение верстки сайтов

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

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

    HTML – это язык разметки гипертекста.

    С его помощью формируется сама структура, каркас сайта. Соответственно, без HTML верстка просто невозможна!

    Далее нам нужно разобраться с тем, что представляет собой второй язык – CSS. Расшифровывается эта аббревиатура так – cascade style sheets. То есть, каскадные таблицы стилей. Если вы новичок, то едва ли что-то сейчас поняли. Но давайте попробуем объяснить простыми словами. CSS – это все, что связано с оформлением страницы.

    Например, в HTML мы можем создать абзацы, таблицы, блоки, да и все, что захотим. Но все это будет выглядеть очень невзрачно. Для оформления каркаса и создания по-настоящему красивого шаблона нам нужен CSS. Итак, вопрос: “Что такое верстка сайта?”, я надеюсь, у вас отпал. По крайней мере, вам стало понятней.

    Ну а что такое JavaScript? “Почему вы о нем ничего не рассказываете?”, — справедливо спросите вы. Как уже говорилось ранее, это язык программирования и он очень активно применяется в верстке. Наверняка вы не раз бывали на сайтах, где при определенных действиях происходят определенные вещи. Например, при клике на меню вылазит дополнительный блок, наведение на элемент меняет его внешний вид или при переключении кнопок меняется содержимое, показываемое в каком-то контейнере. Все это очень полезные вещи, но реализовать их на чистом HTML и CSS невозможно.

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

    Суть верстки

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

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

    Как создается сайт?

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

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

    Рис1. Верстка сайта в Notepad++

    Макет имеем, программа есть. Можно приступать к работе.

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

    Какие бывают виды верстки?

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

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

    Рис. 2. Горизонтальный скролл при уменьшении окна – явный признак фиксированных размеров

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

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

    А что такое адаптивная верстка сайта?

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

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

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