Тема: Табличная верстка.

Дата: 2025-06-14; Просмотры: 1

Оценка:

0.00 из 5.00 — оценок

Скачиваний: 0

ПЛАН ЗАНЯТИЯ

Дисциплина: ОП.16 Основы web - технологий

Преподаватель: Машарова Р.В.

Курс: 2

Группа: 1ИСП-21

Специальность: Информационные системы и программирование

Дата: 03.03.2023

Время проведения: 13.30-15.00, 4 пара

Тема: Табличная вёрстка.

Цель занятия:

Дидактическая: познакомиться с табличной вёрсткой в HTML

Развивающая: развивать логическое и критическое мышление, умение обобщать и синтезировать знания

Вид занятия лекция

Литература:

1. Храмцов П.Б., Брик С.А.,. Русак А.М., Сурин А.И., Основы web-технологий. Курс лекций. -3- е изд., пер. и доп. – Интернет-Университет Информационных Технологий, 2017. – 512 с.

2. Гаврилов М.В., Информатика и информационные технологии. Учебник для прикладного бакалавриата /М.В.Гаврилов, В.А.Климов. -4-е изд., пер. и доп. – М.: Юрайт, 2017. – 383с.

3. Новожилов О.П. Информатика. Учебник для прикладного бакалавриата /О.П.Новожилов. -3-е изд., пер. и доп. – М.: Юрайт, 2018. – 619с.

4. Симонович С.В. «Основы Информатики. Базовый курс» СПб: Питер 2018 год – 640 с.

Тема: Табличная верстка.

1. Табличная верстка: построение модульной сетки при помощи таблиц.

2. Типовые модульные сетки HTML документа

1. Табличная верстка: построение модульной сетки при помощи таблиц.

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

Возможности табличной верстки:

• Создание колонок

• «Резиновый» макет

• «Склейка» изображений

• Фоновые рисунки

• Выравнивание элементов

• Особенности браузеров Недостатки табличной верстки:

• Долгая загрузка

• Громоздкий код

• Плохая индексация поисковиками

• Нет разделения содержимого и оформления

• Несоответствие стандартам

2. Типовые модульные сетки HTML документа

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

Пример такой модульной сетки приведен на рис. 1

Логотип

Меню	Основной материал

Рис.1. Двухколонная модульная сетка

Ниже приведен HTML код, реализующий данную структуру.

<HTML>

<HEAD>

<TITLE>Табличная вёрстка</TITLE>

</HEAD>

<TR>

<TD align=center colspan=2>Логотип</TD>

</TR>

<TD >Основной материал</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Результат в браузере

Трехколонная модульная сетка «резинового» макета применяется на крупных порталах с множеством информационных сервисов. Как правило, в первой колонке располагается меню сайта и дополнительная информация, во второй — основной материал, в третьей – дополнительные функции. Часто в модульную сетку сайта добавляют блоки «Заголовок сайта» и «Окончание сайта».

Пример такой модульной сетки приведен на рис. 2.