Лабораторная работа 4 - Разметка (макетирование) страниц с помощью таблиц. ( 2 балла)
Цель работы: формирование умений разметки страниц с помощью таблиц.
- Спецификация HTML 4.01 (RUS)
- Основы HTML
- Основы HTML
- Основы HTML. Основные тэги
- Краткий справочник по HTML
- Форматирование текста (методическое пособие, для верстальщиков печатных изданий)
- Верстка с помощью таблиц
- Форматирование текста
Поясняющая информация
Чтобы допускать минимум ошибок, надо воспользоваться чужим опытом. Самый большой опыт разметки страниц накоплен у печатных изданий. Если взять газету, журнал, книгу и т.д., и внимательно посмотреть, то мы увидим следующие основные элементы:
-
Как правило, используются белый фон и черные буквы. Представьте толстую книгу с белыми буквами и черным фоном, прочитав, испортите себе зрение.
-
Поля (справа и слева) и отступы (сверху и снизу). Попробуйте распечатать текст без полей и отступов, читать будет не удобно.
-
Абзацы выровнены по обеим сторонам. Все строки начинаются по одной линии, и заканчиваются по другой линии. "Глаза" к этому привыкают, и читать становиться удобнее.
-
Новый абзац начинается с отступом первой строки, между абзацами пробел больше, чем между строк. Так легче визуально выделить абзацы.
-
Применение "колончатой структуры", особенно заметно в газетах и журналах. Таким образом, можно более эффективно использовать всю большую страницу, размещая маленькие тексты и элементы графики, не оставляя "белых пятен". Также текст в узких колонках можно читать сверху в низ, не перемещая "глаза" справа на лево.
Если первые пункты понятно как реализовать, то с колончатой структурой могут возникнуть проблемы.
Изначально в HTML не было предусмотрено возможности разметки страниц, поэтому для этих целей стали использовать таблицы.
Если посмотреть, большинство сайтов сделано именно с использованием таблиц для разметки.
Примеры:
Примеры форматирования страниц
Макетирование страниц таким способом позволяет создать поля страницы, разделить текст на колонки, окрасить отдельные области в определенный фоновый цвет и даже использовать локальные фоновые изображения.
Для представления информации в виде колонок текст и изображения размещают внутри ячеек таблицы. Внутрь ячеек можно вкладывать дополнительные таблицы.
Наиболее часто используемая структура приведена ниже (см. рис.):
Пример разбивки страницы
Сейчас самое распространенное разрешение — 800х600, это означает, что ширину основной таблицы нужно задавать не более 750, чтобы она была полностью видна на экране.
Размеры таблицы можно задать в процентном отношении к окну браузера, например 80% (если задать 100%, то часть таблицы не будет видна, и не будет полей).
Для ускорения загрузки страницу делают из трех, одинаковых по ширине, таблиц - верхнюю, основную и нижнюю. Также это помогает поддерживать общий стиль всего сайта, когда верхняя часть и нижняя повторяется на всех страницах.
Для примера можно посмотреть сайты: http://www.rbc.ru; http://www.aport.ru; http://www.gismeteo.ru; http://www.lenta.ru . Чтобы увидеть скрытую табличную структуру можно скопировать страницу во FronPage.
Недостатки использования таблиц:
-
"Медленная загрузка". Пока вся таблица не загрузится, информация на экране не появится.
-
Излишний код. Приходится создавать много ячеек и строк, которые в общем-то, не нужны.
-
Отсутствие возможности с точностью до пикселов расположить элемент на экране.
-
Отсутствие возможности "надвинуть" один элемент на другой.
-
Отсутствие возможности управлять отображением элементов (при переполнении, таблица просто увеличивается в размерах).
Практические задания
Задание 1
-
Переделайте первую страницу в соответствии с полученными знаниями. Страница должна содержать не менее 4 блоков. Блоки обязательно должны быть разделены пустыми ячейками размером 3-30 пикселов, бордюры должны быть не видимыми. Верхняя и нижняя часть должны быть сделаны как отдельные таблицы, чтобы их можно было вставлять и на других страницах.
-
Примените на свой вкус фоновый цвет ячеек или фоновый рисунок ячеек.
-
Не забудьте также сделать ссылку на первую страницу.
-
В исходнике страницы укажите, в виде комментариев, начало каждого блока и какой это блок (правый, левый, второй сверху и т.д.).
Задание 2
-
Приведите все остальные страницы к общему виду, т.е. верхняя и нижняя часть должны быть одинаковы для всех страниц (кроме фреймовых страниц).
-
Проставьте мета данные на всех страницах.
К сдаче лабораторной предоставляются: работающие страницы на сервере с комментариями указанных тегов и их свойств в исходнике.