Разметка web-страницы при помощи таблицы. Создание главной страницы сайта
Занятие 12
Publication version: 1

Если вы создаёте серьёзный сайт, то нужно тщательно подбирать не только контент страниц сайта, но и продумывать его структуру.

Структура веб-страницы — это порядок (схема) расположения элементов на странице сайта.  Источник: https://semantica.in/blog/struktura-straniczy.html

Некоторые элементы, которые обычно входят в структуру веб-страницы:

  • Заголовок (“header” – шапка). Большая полоса вверху страницы с крупным заголовком и/или логотипом. Здесь указывается общая информация о веб-сайте, не меняющаяся от страницы к странице. 

  • Навигационное (главное) меню. Ссылки на основные разделы сайта, обычно в виде кнопок, ссылок или вкладок. 

  • Основное содержимое. Большая область в центре страницы, содержащая уникальный контент данной веб-страницы. 

  • Боковая панель. Чаще содержит некоторую вспомогательную информацию, ссылки, цитаты, рекламу и т. д., но может также содержать в себе главное меню.

  • Нижний колонтитул (“footer” – подвал). Полоса в нижней части страницы, которая обычно содержит уведомления об авторских правах или контактную информацию. 

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

Возможны различные варианты разметки. Рассмотрим некоторые из них.

Первый вариант 

Разметка производится с использованием таблицы шириной на весь экран, независимо от того, каково разрешение экрана (width=”100%”). В данном случае удобно создать таблицу, состоящую из двух строк и двух столбцов. Верхняя строка будет отведена под заголовок странички, левый столбец будет отведен под меню web-сайта. При такой разметке страничка всегда будет занимать весь экран, независимо от того, какое разрешение экрана стоит у посетителя (рис. 1). 

Рис. 1. Пример разметки web-страницы. Первый вариант

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

Второй вариант 

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

Рис. 2. Пример разметки web-страницы. Второй вариант

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

Рис. 3. Пример разметки Web-страницы. Третий вариант