Как правильно и быстро верстать сайты

Чем занимается дизайнер верстальщик

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

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

Если рассматривать профессию дизайнера верстальщика, то ее условно классифицируют на следующие типы или специализации:

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

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

Где можно работать

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

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

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

Этапы верстки

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

Оценка.

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

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

Нарезка изображений.

После первого этапа подбирается тип рисунка. Обычно используют такие три формата: jpg, png, gif. Нарезки изображений сохраняются в папку, которая будет в будущем использоваться для создания одностраничника. Если необходимо – картинки для большего удобства объединяются в спрайты.

Создание каркаса сайта в виде блоков.

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

1. Наполнение контейнеров изображениями.
2. Наделение веб-ресурса кроссбраузерными функциями.

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

Исправление ошибок и отладка.

Самый важный, ответственный этап. Если в конечном итоге получится сильно «забагованный» продукт – вся работа может пойти насмарку. Лучший сервис по проверке валидации разметки html – https://validator.w3.org/.

Какие сложности есть в верстке сайтов?

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

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

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

 
Чтобы сделать плавную анимацию при наведении на конфетки слева, пришлось прописать 4 стиля, потому что не все браузеры понимают стандарт.

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

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

Вот примеры адаптивных сайтов, которые я верстала (меняем ширину окна и наблюдаем за изменениями):

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

Как начать работать веб-верстальщиком, и сколько за это платят?

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

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

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

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

Заплата веб-верстальщика

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

За 1 проект можно получить от 2000 до 15 тыс. рублей – все зависит от направленности ресурса и стартового капитала заказчика

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

Идеальная вакансия

• Умеет делать адаптивную кроссбраузерную оптимизированную вёрстку, совместимую с современными браузерами. В вёрстке использует SVG.
• Идеально знает CSS. Использует препроцессор Sass. Знает флексы. Умеет делать CSS-анимации и использует БЭМ. Знает библиотеку Bootstrap.
• Знает HTML. В своей работе использует canvas. Шаблонизирует HTML с помощью PUG.
• Использует Git. Умеет работать в GitHub.
• Может натянуть вёрстку на CMS: Bitrix и WordPress.
• JavaScript пишет с помощью jQuery, но не чурается ES6.
• Умеет автоматизировать свою работу с Node.js, npm-скипты, Autoprefixer, Gulp или Webpaсk.
• Уверенно владеет Photoshop и Illustrator или знает Figma или Sketch.
• Имеет своё портфолио, инициативный, готов пройти испытательный срок

Верстальщический вундерлист

Кроссбраузерная оптимизированная вёрсткаSVGSass CanvasPUGGitНатянуть вёрстку на CMSBootstrapjQueryнечто, npm-скрипты, Autoprefixer, Gulp, Webpack

А портфолио откуда брать?

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

Что об этом всём думают ребята из индустрии?

Катя Иванова, перевела бабушку на ReactПо опыту: нужно точно, быстро и адаптивно. 
Точно — значит по макету: надо уметь открыть psd и померить отступы. Быстро — значит код легко изменять и его можно переиспользовать: надо знать препроцессоры и уметь правильно разделить макеты на компоненты (приходит с опытом). Адаптивно то и значит: надо знать про медиа-запросы и уметь нафлексить флексами резиновую вёрстку, или на гридах. 
Чтобы собрать своё добро, нужно знать, где скачать Node.js, как скачать пакет из npm и уметь пользоваться Webpack или Gulp (если он ещё не умер): пожать, минифицировать, запустить хот-релоад. И да, Git, нужно выучить десяток базовых команд. Это необходимый минимум.
В идеале нужно освоить базовый JavaScript и React, чтобы верстать компоненты сразу на нём. И вот еще чуть-чуть, и ты уже фронтендер 😀
Нынче если ищут именно верстальщика, а не полноценного фронта, значит последний уже есть, а вёрстки много и/или она сложная. Значит можно не знать JavaScript, но стоит освоить любой шаблонизатор, одну из популярных методологий, познакомиться с существующими библиотеками компонентов.
Чтобы тебя все хотели, нужно много и быстро верстать. А для этого нужно активно пользоваться доступными инструментами и подходами и уметь выбирать подходящие. Что, конечно, выходит далеко за рамки знания HTML и CSS.

Профессия веб-верстальщика: обязанности, знания и навыки специалиста

Итак, верстальщик сайтов – кто это такой? Это специалист, который создает HTML страницы из предварительного сделанного макета. Макет – это не что иное, как дизайн будущего сайта, разработанный веб-дизайнером.

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

Что должен знать верстальщик сайтов

Чтобы создавать уникальные и качественные HTML страницы, специалист данного направления обязан уметь оперировать:

• фотошопом;
• основными инструментами языка программирования РНР и HTML.

Это еще не все, что нужно знать для верстки сайтов

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

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

Краткий итог. Так, мы рассмотрели вопрос, кто это такой – верстальщик HTML. Данная профессия сегодня является престижной и востребованной. Однако это работа не из простых, и требует хорошей подготовки, навыков и определенных умений. Мы ответили на вопрос, что делает верстальщик сайтов, теперь разберемся в том, как освоить данное ремесло, и где можно ему обучиться.

Профессиональные обязанности

Верстальщик посредством кода HTML, CSS и JavaScript создает HTML-шаблон, разработка которого состоит из нескольких этапов:

• анализ графического дизайна сайта;
• подборка модели шаблона;
• нарезка графических спрайтов;
• сборка HTML-шаблона.

Этапы верстки и виды сайтов 

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

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

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

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

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

По макету верстки все сайты подразделяются на 3 группы:

• жестко фиксированные (Rigid fixed);
• адаптивные резиновые (Adaptable fluid);
• расширяемые эластичные (Expandable elastic).

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

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

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

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

Чего мы ожидаем?

В первую очередь необходимо понять, чего мы ожидаем от человека на каждом из уровней. Ваши ожидания могут отличаться.Junior — знает основные теги, может подправить контент на готовом html сайте, умеет грамотно форматировать текст, без проблем вставит встраиваемый элемент (ролик с ютуба, яндекс карту), ведёт работу через систему контроля версий только для себя (master, 1 контрибьютор). Может сверстать что-то несложное с нуля, и оно даже не поедет (лично у него). В целом не является самостоятельной единицей и требует руководства свыше.Middle — более-менее автономная единица (либо полностью автономная для малых и средних проектов). Может хорошо сверстать сайт средних размеров, и он будет корректно отображаться во всех актуальных версиях браузеров. Понимает, как работают шаблонизаторы, и может их использовать (при условии предоставления остального кода). Умеет планировать и документировать свою работу и оценивать сроки

Понимает важность поддержания стиля кода. Понимает, зачем есть грид-системы и css фреймворки

Умеет брать всю необходимую информацию из макетов от дизайнера. Может взаимодействовать с небольшой командой, создавать ветки и пулл-реквесты.Senior — может спроектировать систему блоков для крупного проекта. Знает, как избежать повторов и проблемных мест при использовании его кода другими разработчиками. Умеет декомпозировать сложные задачи и грамотно формулировать задачи. Умеет применять минимум одну методологию разработки (например, БЭМ). Может сделать так, чтобы проект открывался максимально быстро. Хорошо понимает несколько популярных шаблонизаторов. Способен написать сборщики и автоматизировать процесс, с этим связанный. Может проводить код ревью и курировать других верстальщиков.
Рассмотрим теперь чуть конкретнее, что включает в себя каждый из блоков на каждом уровне.

Где начать обучение верстке и сколько это стоит

Верстальщик – не самая сложная профессия в IT-сфере, поэтому ее легко можно освоить самостоятельно. Такая специальность идеально подойдет для тех, кто хочет работать удаленно, однако при официальном трудоустройстве работодатель может потребовать соответствующий диплом.

Чтобы стать профессиональным верстальщиком, вы можете закончить такие онлайн-курсы:

1. “Я – Веб-разработчик – PRO” от Skillbox. Длительность обучения – 2 года. Формат: вебинары, видеоуроки с домашними заданиями. По окончании курса гарантировано трудоустройство. Стоимость обучения ежемесячно составляет 6 900 рублей (первые полгода оплачивать не надо).
2. “Frontend-разработчик с нуля” от Нетологии. Обучение рассчитано на 10 месяцев. Вы получаете доступ к видеоурокам. Также вы выполняете проекты, которыми сможете пополнить портфолио. Ежемесячно за обучение необходимо платить 6 600 рублей.
3. “Как создать сайт самостоятельно” от TexTerra – курс включает 13 лекций с домашними заданиями. Длительность обучения – 2 месяца. Стоимость составляет 10 000 рублей.
4. “Профессия Frontend-разработчик” от GeekBrains и Mail.ru Group. Работа с лучшими преподавателями, самостоятельное изучение материала и взаимодействие с наставниками из числа самых успешных выпускников прошлых потоков. Длительность обучения – 7 месяцев. Стоимость – 7 141 рублей в месяц.

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

1. “HTML/CSS” от Beonmax. Вам будет предоставлен доступ к видеоурокам с домашними заданиями и интерактивными упражнениями. Длительность обучения 5 часов (31 видеоурок).
2. Обучение верстке от HTML Academy. Вы будете проходить интерактивные уроки с домашними заданиями. Длительность обучения зависит исключительно от вашей скорости усвоения учебного материала и мотивации.
3. “Основы HTML и CSS” от Нетологии. Обучение проходит в формате онлайн-вебинаров 2 раза в неделю. Длительность – 2 недели.
4. Эффективное обучение HTML для новичков от Евгения Попова. Курс включает 33 видеоурока.
5. “HTML и CSS” от PHP-School. Вам необходимо пройти 11 уроков и выполнить домашние задания. Обучение длится 20 часов.

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

Требования к вёрстке

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

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

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

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

Подготовительный этап

Итак, создайте где угодно (хоть на Рабочем столе, хоть в отдельной папке) файл index.html. В этот же каталог добавьте директорию images. Она будет содержать все картинки, используемые в шаблоне и на странице. Так как графические элементы мы вырезали заблаговременно, сразу скопируем их в папку images и дадим такие названия:

• back_all — подложка сайта.
• header_top — фон шапки.
• big_pic — логотип.
• title — фон заголовков левой панели.
• footer — заливка низа сайта.
• 1mini — первое фото для основной части страницы.
• 2mini — второе фото.

В папке со страницей index.html создайте файл styles.css — в нём будут размещены таблицы стилей шаблона.

Блокнот для редактирования кода использовать не рекомендуется. Гораздо лучше для этой цели подходит редактор Notepad++. Это подсвечивающая синтаксис разных языков (HTML и CSS — в том числе) программа, заниматься разработкой в которой гораздо удобней, чем в простых редакторах текстовых документов.

Проверка верстки

Процесс базового тестирования предполагает ручные прогоны сценариев в разных браузерах и на разных устройствах. В этих сервисах можно найти точную информацию: validator.w3.org и jigsaw.w3.org/css-validator. Также нужно проверить верстку на соответствие макету с помощью сервиса welldonecode.com/perfectpixel. Page Ruler поможет измерить в пикселях сверстанные блоки, оценить размеры форм, шапок, логотипов, контактных данных, карточек, рубрик, виджетов и пр.

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

Понятие и особенности верстки интернет сайтов

Что это такое верстка сайта? Если выражаться языком профессионалов, это создание полноценной HTML страницы. Это страничка, которую может открыть и увидеть каждый желающий в окне поисковой системы.

Что значит термин «верстка»? Оно обозначает обработку графических элементов веб-сайта. Для этого используются специальные инструменты и редакторы.

Разновидности верстки

Чтобы понять, что входит в верстку сайта, необходимо, хотя бы, примерно разбираться в ее разновидностях. Выделяют 2 основных типа веб-верстки:

1. Табличная. Все элементы на сайте описываются при помощи специально созданных таблиц. Иными словами, вся страница является буквально табличным набором, который обозначается термином table. Примечательно, что на сегодняшний день данный тип верстки уже считается неактуальным, устаревшим.
2. Блочная. В данном случае страничка в сети состоит из блоков “div”. Сегодня такая разновидность верстки является самой популярной и востребованной.

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

Итак, наряду с табличной и блочной, выделяют еще и следующие виды веб-верстки:

1. Адаптивная. Оформление сайта настраивается таким образом, чтобы его функционал был доступен с любого устройства.
2. Фиксированная. Это разновидность блочной верстки, которая подразумевает придание блокам конкретных (фиксированных) размеров, которые не подлежат изменению. Сегодня ее использование компетентными представителями профессии верстальщика считается совершенно нецелесообразным.
3. Резиновая. При такой верстке размеры блоков могут меняться – уменьшаться или, наоборот, увеличиваться. Сегодня в работе верстальщика такая верстка считается самой актуальной и правильной.
4. Мобильная. При такой верстке параметры сайта устанавливаются таким образом, чтобы его функционал мог быть по максимуму использован с мобильных устройств.

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

Какая верстка считается качественной

• Блочная – с применением<div>.
• Адаптивная. кроссбраузерная – страница ведет себя корректно в разных браузерах и на мобильных гаджетах.
• Валидная – без ошибок в коде.
• Текстовая. То, что можно сверстать в виде текста,не верстается картинкой. Поисковая система любит текстовый контент, поэтому данный факт должен учитывать каждый верстальщик.
• Код минимально короткий, все стили вынесены в отдельный файл.
• Все содержимое в html и css прописано строчными буквами.
• Для тега <img> (картинки) обязательно указаны высота и ширина изображения.
• CSS используется преимущественно. То есть, если можно обойтись без JS — то динамика описывается в CSS.
• То же самое для картинок. Если спецэффекты для шрифта можно наложить при помощи CSS, то используется текст, а не картинка.
• JS файлы подключены в низу кода. Если вы подключаете их в<head>, то это плохо сказывается на скорости загрузки веб-страницы.
• JS файлы объединены в один (по возможности).
• Навигация по сайту реализована списками (<ul>, <li>), поисковая система быстрее понимает такую навигацию.
• Правильная работа с заголовками. Чтобы у SEO-специалиста в будущем не было проблем, указывайте H1-H6 только в контентной части сайта. Размещайте заголовки по принципу: первым идет H1, потом по убыванию другие виды заголовков.
• Продуманы стили всех заголовков, абзацев, картинок, списков в контентной части документа.
• Структурированный код, который наглядно показывает все закрывающие и открывающие теги.

Верстаем основную часть страницы

Далее настраиваем самый большой блок, на котором будет размещён весь уникальный контент. Он будет занимать 500px и располагаться в правой части сайта. Установим правила позиционирования, оформления заголовков, абзацев и ссылок (обо всех свойствах мы уже говорили в статьях по CSS).

#right
{
float: right;
width: 500px;
padding-right: 10px;
}

#right h4
{
	margin: 0;
	padding: 0px;
	font-size: 12px;
	color: #D72020;
}

#right a
{
color: #D72020;
text-decoration: none;
}

#right p {
	margin: 0;
	padding: 0;
	padding-bottom: 10px;
}

#right h2 {
	margin: 0;
	padding: 0;
	padding-top: 10px;
	color: #D72020;
}

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

Заполним контейнер right. Изображения поместим в простую таблицу.

<h2>Галерея</h2><br />
		<h2>Кухни</h2><br />
		<table cellspacing = 40>
		<tr>
		<td><img src="images/1mini.jpg" alt = "1"></td>
		<td><img src="images/2mini.jpg" alt = "2"></td>
		</tr>
		<tr>
		<td><img src="images/1mini.jpg" alt = "1"></td>
		<td><img src="images/2mini.jpg" alt = "2"></td>
		</tr>
		<tr>
		<td><img src="images/1mini.jpg" alt = "1"></td>
		<td><img src="images/2mini.jpg" alt = "2"></td>
		</tr>
		</table>

Контент получил разметку, но ему явно не хватает белого фона, полноценно который появится ещё не скоро.