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

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

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

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

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

С точки зрения позиционирования более мелких элементов внутри более крупных верстка может быть четырех видов:

1. Табличная верстка. Это самый древний вид верстки. Во времена зарождения интернета ни CSS, ни тэга `<div>` еще не было, и создателям страниц приходилось выкручиваться доступными методами. Самым лучшим вариантом было создание одной огромной таблицы на странице, в которую размещали шапку, подвал, текст, картинки и прочие элементы страницы. Пример такой верстки показан на картинке ниже.

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


2. Блочная верстка. С появлением CSS и тегов `<div>` и <span> стало возможным использовать более гибкие и современные методы верстки. В блочной верстке каждый элемент страницы размещается в отдельном блоке, что позволяет управлять расположением и стилями этих блоков, используя CSS.

Пример такой верстки показан ниже на картинке

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

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

4. Флексбокс и CSS Grid верстка. Это современные методы верстки, которые позволяют создавать сложные макеты с минимальными усилиями. Flexbox (Flexible Box Layout) и CSS Grid Layout предоставляют возможности для гибкого расположения элементов внутри контейнеров, что значительно упрощает разработку адаптивных и сложных интерфейсов.

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

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

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

На этом занятии мы рассмотрим основы табличной, и блочной верстки, и вкратце разберем их особенности и недостатки.

В основе табличной верстки лежат элементы разметки <table> и сопутствующие теги, такие как строки <tr> и ячейки <td>. Важно понимать, что изначально эти теги предназначались для представления табличной информации, а не для позиционирования вложенных элементов. Поэтому особенности расчета положения и размеров (особенно высоты строк и таблицы в целом) подчиняются несколько иной логике по сравнению с блочной разметкой. Попытки изменить высоту строки, указав даже принудительно CSS стиль style="height:20%", скорее всего, не приведут к правильному расчету! Именно поэтому табличная верстка подходит только для простых случаев расположения элементов. Например, если нужно расположить набор кнопок одинакового размера в несколько рядов или столбцов.

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

Примерный дизайн

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

Дизайн интерфейса

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

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

После объединения ячеек (атрибуты colspan и rolspan):

В файл HTML вставим код:

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

Если в коде не указывать пропорциональную ширину в столбцах, то вид станет таким:

Каждый столбец стал занимать треть ширины таблицы и контролы сместились, их ширина изменилась.

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

Пример такого кода тега textarea для нашего файла HTML:

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

Вывод по табличной верстке:

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

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

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

Внешний вид:

Как видно из приведенного кода HTML, он стал более лаконичным и читаемым. Вместо громоздкой таблицы со всеми многочисленными вложенными тегами для строк и ячеек, создается один div блок и в нем последовательно размещаются необходимые контролы. Конечно, и здесь есть свои тонкости. Для правильного расположения в одну строку может потребоваться использование «резинового» позиционирования в рамках блока (style="float:left"). В этом случае потребуется тщательная проверка на поведение такого форматирования при изменении размера области плагинов, так как иногда можно получить перемещение контролов в неожиданные места.

Это все решаемо, и решения обычно всегда находятся, нужно лишь немного поискать в интернете в поисках ответов на возникшие вопросы. Преимущества блочной верстки включают её гибкость и адаптируемость к динамическим изменениям. Например, автоматический пересчет размеров приводит к появлению полос прокрутки, когда число контролов превышает высоту, отведенную под область плагинов (для этого в головном div блоке нужно предусмотреть overflow-y:auto).

Вывод по блочной верстке:

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

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

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

Пример работы с отладчиком приведен ниже:

В приведенном примере показано, как можно корректировать смещение сверху (margin-top:) для чекбокса и динамически наблюдать за результатами. Для этого нужно правой кнопкой мыши щелкнуть по любому контролу (при запуске редактора используйте ключ отладки --ascdesktop-support-debug-info) и выбрать пункт контекстного меню “Inspect Element”. Откроется модуль отладки с выбранной вкладкой Elements, где можно управлять стилями выбранного элемента. Двойным щелчком можно изменять и добавлять стили, наблюдая за их влиянием на внешний вид плагина.

Не забудьте затем перенести изменения в основной HTML-код!

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

Существует множество способов создания дизайна. Главное — изучить их и выбрать наиболее удобный!